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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
JavaScript模块详解
Dec 18 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
JavaScript之数组扁平化详解
Jun 03 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
也谈php网站在线人数统计
2008/04/09 PHP
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Vue实现可移动水平时间轴
2020/06/29 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
python3实现暴力穷举博客园密码
2016/06/19 Python
python编程实现希尔排序
2017/04/13 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
乌鸦喝水教学反思
2014/02/07 职场文书
计算机学生的自我评价分享
2014/02/18 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
党课培训心得体会
2014/09/02 职场文书
优秀班组事迹材料
2014/12/24 职场文书
市场营销计划书范文
2015/01/16 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
高中教师个人总结
2015/02/10 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js