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 Cookie插件js-cookie的使用方法

    轻量级JS Cookie插件js-cookie的使用方法

    js-cookie插件是一个JS操作cookie的插件,源文件只有3.34 KB,非常轻量级,js-cookie也支持npm和Bower安装和管理,下面看看js-cookie的具体用法
    2018-03-03
  • JavaScript实现定时任务队列的示例代码

    JavaScript实现定时任务队列的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现一个基于一定时间间隔连续执行任务队列的功能,文中的示例代码讲解详细,需要的小伙伴可以参考下
    2023-11-11
  • js下将字符串当函数执行的方法

    js下将字符串当函数执行的方法

    js下将字符串当函数执行的方法,需要的朋友可以参考下。
    2011-07-07
  • 调试Node.JS的辅助工具(NodeWatcher)

    调试Node.JS的辅助工具(NodeWatcher)

    Node.JS调试貌似比较麻烦,每次改完了要重启一下Node进程.GOOGLE上有个NPM模块,可以监控JS文件的更改,然后自动重启Node.但我下载后在windows里运行报错
    2012-01-01
  • popdiv

    popdiv

    popdiv...
    2006-07-07
  • 原生js实现tab选项卡切换

    原生js实现tab选项卡切换

    这篇文章主要为大家详细介绍了原生js实现tab选项卡,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Egg Vue SSR 服务端渲染数据请求与asyncData

    Egg Vue SSR 服务端渲染数据请求与asyncData

    这篇文章主要介绍了Egg Vue SSR 服务端渲染数据请求与asyncData,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 微信js-sdk界面操作接口用法示例

    微信js-sdk界面操作接口用法示例

    这篇文章主要介绍了微信js-sdk界面操作接口用法,结合实例形式分析了微信界面操作的相关接口功能与使用技巧,需要的朋友可以参考下
    2016-10-10
  • 如何HttpServletRequest文件对象并储存

    如何HttpServletRequest文件对象并储存

    这篇文章主要介绍了如何HttpServletRequest文件对象并储存,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • TableSort.js表格排序插件使用方法详解

    TableSort.js表格排序插件使用方法详解

    这篇文章主要为大家详细介绍了TableSort.js表格排序插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论