JavaScript实现单例模式实例分享


Posted in Javascript onDecember 22, 2017

传统单例模式

保证一个类仅有一个实例,并提供一个访问它的全局访问点。

实现单例核心思想

无非是用一个变量来标志当前是否已经为某个类创建过对象,如果是,则在下一次获取该类的实例时,直接返回之前创建的对象,接下来我们用JavaScript来强行实现这个思路,请看代码:

var Singleton = function( name ){
  this.name = name;
};
Singleton.prototype.getName = function(){ alert ( this.name );
};
Singleton.getInstance = (function(){ 
var instance = null;

return function( name ){





if ( !instance ){






instance = new Singleton( name );





}




return instance;


 }
})();

我们通过Singleton.getInstance来获取Singleton类的唯一对象,这样确实是没问题的,但是js本身是没有类这种概念的,所以我们强行用传统单例思想来实现是没有任何意义的,这样的代码又臭又长(其实是我自己看着不舒服嘻嘻嘻)。下面我们使用JavaScript的闭包来实现一个单例,请看代码:

var CreateDiv = (function(){ 

var instance;



var CreateDiv = function( html ){ 




if ( instance ){






return instance; 




}





this.html = html; this.init();





return instance = this;
};
CreateDiv.prototype.init = function(){
var div = document.createElement( 'div' );
div.innerHTML = this.html; 
document.body.appendChild( div );



};



return CreateDiv; })();
var a = new CreateDiv( 'sven1' ); var b = new CreateDiv( 'sven2' );
alert ( a === b ); // true

可以看到,这样我们确实用闭包来实现了一个单例,但这个代码还是高度耦合的,CreateDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法,第二是保证只有一个对象。这样的代码是职责不明确的,现在我们要把这两个工作分开,构造函数就负责构建对象,至于判断是返回现有对象还是构造新的对象并返回,我们交给另外一个函数去完成,其实也就是为了满足一个编程思想:单一职责原则。这样的代码才能更好的解耦,请看下面代码:

var CreateDiv = function (html) {
    this.html = html;
    this.init();
  };
  CreateDiv.prototype.init = function () {
    var div = document.createElement('div');
    div.innerHTML = this.html;
    document.body.appendChild(div);
  };
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreateDiv('sven1');
  var b = new ProxySingletonCreateDiv('sven2');
  alert(a === b); //true

可以看到,现在我们的构造函数CreateDiv现在只负责构造对象,至于是返回现有对象还是构造新的对象并返回,这件事我们交给了代理类proxySingletonCreateDiv来处理,这样的代码看着才舒(zhuang)服(bi)嘛!

最后贴一个高度抽象的单例模式代码,惰性单例的精髓!

//单例模式抽象,分离创建对象的函数和判断对象是否已经创建
  var getSingle = function (fn) {
    var result;
    return function () {
      return result || ( result = fn.apply(this, arguments) );
    }
  };

形参fn是我们的构造函数,我们只要传入任何自己需要的构造函数,就能生成一个新的惰性单例。比如说传入创建一个女朋友的构造函数,并且调用getSingle(),就能生成一个新的女朋友。如果以后再调getSingle(),也只会返回刚才创建的那个女朋友。至于新女朋友——不存在的。

单例常用场景

只需要生成一个唯一对象的时候,比如说页面登录框,只可能有一个登录框,那么你就可以用单例的思想去实现他,当然你不用单例的思想实现也行,那带来的结果可能就是你每次要显示登陆框的时候都要重新生成一个登陆框并显示(耗费性能),或者是不小心显示出了两个登录框。

以上就是我们给大家分享的关于JS实现单例模式的相关学习的心得,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
Jun 09 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
jQuery事件用法详解
Oct 06 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
小程序实现搜索框功能
Mar 26 Javascript
vue基于better-scroll实现左右联动滑动页面
Jun 30 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 #Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 #Javascript
vue init失败简单解决方法(终极版)
Dec 22 #Javascript
使用axios实现上传图片进度条功能
Dec 21 #Javascript
详解使用webpack构建多页面应用
Dec 21 #Javascript
使用ajax的post同步执行(实现方法)
Dec 21 #Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 #jQuery
You might like
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
PHP has encountered an Access Violation
2007/01/15 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python网页请求urllib2模块简单封装代码
2014/02/07 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Sublime开发python程序的示例代码
2018/01/24 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python  logging日志打印过程解析
2019/10/22 Python
如何基于Python实现数字类型转换
2020/02/07 Python
浅析Python requests 模块
2020/10/09 Python
八一建军节感言
2014/02/28 职场文书
护理学专业求职信
2014/06/29 职场文书
租车协议书范本2014
2014/11/17 职场文书
五年级学生期末评语
2014/12/26 职场文书
高中生思想道德自我评价
2015/03/09 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
合作意向书范本
2019/04/17 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫