JavaScript设计模式之单例模式详解

 更新时间:2017年06月09日 10:29:32   投稿:lijiao  
这篇文章主要为大家详细介绍了JavaScript设计模式之例模式的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

最近项目不太忙,难得有时间看看书,平时挺喜欢js这门语言。也看过很多高级教程,觉得自己还是比较热衷于js的设计模式。这一次重温一下《JavaScript设计模式与开发实践》,开篇为单例模式。

/**
 * pre 单例模式
 * 定义:保证一个类仅有一个实例,并提供一个访问它的全局访问点
 * 应用:单例模式是一种常用的模式,有一些对象我们往往只需要一个,
 * 比如线程池、全局缓存、浏览器中的 window 对象等。
 */
//--------------singleton-01-------------
/*写法1*/
var Singleton = function(name){
 this.name = name;
 this.instance = null;
};

Singleton.prototype.getName = function(){
 alert(this.name);
};

Singleton.getInstance = function(){
 if(!this.instance){
  this.instance = new Singleton(name);
 }
 return this.instance;
};

var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);

// ------------singleton-02----------------
/*写法2*/
var Singleton = function(name){
 this.name = name;
}
Singleton.prototype.getName = function(){
 return this.name;
}

Singleton.getInstance = (function(){
 var instance = null;
 return function(name){
  if(!instance){
   instance = new Singleton(name);
  }
  return instance;
 }
})();

var a = Singleton.getInstance("amy");
var b = Singleton.getInstance("ben");
alert(a === b);

// ------------singleton03-----------
/*写法3*/
var Singleton = (function(){
 var instance;
 return function(name){
  if(instance){
   return instance;
  }
  this.name = name;
  instance = this;
 }
})();
var a = new Singleton("amy");
var b = new Singleton("ben");
alert(a === b);

//---------------- 示例 ---------------
var getSingleton = function(fn) {
 var result;
 return function() {
  if(!result) {
   result = fn.apply(this, arguments);
  }
  return result;
 }
};

var getSingletonVip = (function() {
 var instance;
 return function(fn) {
  return instance || (instance = fn.apply(this, arguments));
 }
})();

var createLoginUser = function() {
 var div = document.createElement("div");
 div.innerHTML = '这是登录框';
 document.body.appendChild(div);
 return div;
};

var createInfoGrid = function() {
 var div = document.createElement("div");
 div.innerHTML = '这是列表信息框';
 document.body.appendChild(div);
 return div;
};
//--执行singleton1 
var createUserDiv = getSingleton(createLoginUser);
createUserDiv();
createUserDiv();

//--执行singleton2
getSingletonVip(createLoginUser);
getSingletonVip(createLoginUser);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS 数组 移除 实现代码

    JS 数组 移除 实现代码

    可以移除数组中的值函数 ,用来取出数组中的一些值,间接的修改了数组值。
    2009-07-07
  • JS画布动态实现黑客帝国背景效果

    JS画布动态实现黑客帝国背景效果

    这篇文章主要为大家详细介绍了JS画布动态实现黑客帝国背景效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • layui 设置table 行的高度方法

    layui 设置table 行的高度方法

    今天小编就为大家分享一篇layui 设置table 行的高度方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Python版实现微信公众号扫码登陆

    Python版实现微信公众号扫码登陆

    这篇文章主要介绍了Python版实现微信公众号扫码登陆,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • JS数组搜索之折半搜索实现方法分析

    JS数组搜索之折半搜索实现方法分析

    这篇文章主要介绍了JS数组搜索之折半搜索实现方法,结合具体实例形式分析了javascript数组折半搜索算法的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-03-03
  • 详解cordova打包成webapp的方法

    详解cordova打包成webapp的方法

    本篇文章主要介绍了详解cordova打包成webapp的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 一文彻底理解js原生语法prototype,__proto__和constructor

    一文彻底理解js原生语法prototype,__proto__和constructor

    作为一名前端工程师,必须搞懂JS中的prototype、__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,下面这篇文章主要给大家介绍了关于js原生语法prototype,__proto__和constructor的相关资料,需要的朋友可以参考下
    2021-10-10
  • js仿腾讯QQ的web登陆界面

    js仿腾讯QQ的web登陆界面

    这篇文章主要为大家详细介绍了JavaScript模仿腾讯QQ的web登陆界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Bootstrap的aria-label和aria-labelledby属性实例详解

    Bootstrap的aria-label和aria-labelledby属性实例详解

    这篇文章主要介绍了Bootstrap的aria-label和aria-labelledby属性实例详解,需要的朋友可以参考下
    2018-11-11
  • Javascript的异步函数和Promise对象你了解吗

    Javascript的异步函数和Promise对象你了解吗

    这篇文章主要为大家详细介绍了Javascript异步函数和Promise对象,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03

最新评论