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


Posted in Javascript onJune 09, 2017

最近项目不太忙,难得有时间看看书,平时挺喜欢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);

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

Javascript 相关文章推荐
FCK调用方法..
Dec 21 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
javascript hashtable实现代码
Oct 13 Javascript
JS的反射问题
Apr 07 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
layui原生表单验证的实例
Sep 09 Javascript
纯JS实现五子棋游戏
May 28 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Bootstrap Table使用整理(四)之工具栏
Jun 09 #Javascript
JavaScript设计模式之策略模式详解
Jun 09 #Javascript
Bootstrap Table使用整理(三)
Jun 09 #Javascript
Bootstrap Table使用整理(二)
Jun 09 #Javascript
Bootstrap Table使用整理(一)
Jun 09 #Javascript
Bootstrap Table使用整理(五)之分页组合查询
Jun 09 #Javascript
JS实现简易的图片拖拽排序实例代码
Jun 09 #Javascript
You might like
php smarty模版引擎中的缓存应用
2009/12/11 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
js中less常用的方法小结
2017/08/09 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
[03:30]完美盛典趣味短片 CSGO2019年度名场面
2019/12/07 DOTA
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
使用python turtle画高达
2020/01/19 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
Collection和Collections的区别
2016/05/02 面试题
Python面试题集
2012/03/08 面试题
类的返射机制中的包及核心类
2016/09/12 面试题
大学生自我鉴定
2013/12/08 职场文书
乐山大佛导游词
2015/02/02 职场文书
2016大一新生军训心得体会
2016/01/11 职场文书
礼仪培训心得体会
2016/01/22 职场文书
导游词之广西漓江
2019/11/02 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS