轻松掌握JavaScript单例模式


Posted in Javascript onAugust 25, 2016

定义:保证一个对象(类)仅有一个实例,并提供一个访问它的全局访问点;
实现原理:利用闭包来保持对一个局部变量的引用,这个变量保存着首次创建的唯一的实例; 
主要用于:全局缓存、登录浮窗等只需要唯一一个实例的时候; 

一. 为一个非单例模式对象(如:Demo)实现单例模式的方法:
 给Demo添加一个静态方法来实现单例:

Demo.getSingle = (function(){
  var demo = null;
  return function(name){
    if(!demo){
      demo = new Demo(name);
    }
    return demo;
  }
})();

用法: 
非单例模式:var a = new Demo('Peter'); 
单例模式:

var b1 = Demo.getSingle('Peter');
var b2 = Demo.getSingle('Sufei');
b1 === b2;//true,都引用的是new Demo('Peter')

通过代理类来实现单例:

var ProxyDemo = (function(){
  var demo = null;
  return function(name){
    if(!demo){
      demo = new Demo(name);
    }
    return demo;
  }
})();

用法: 
非单例模式:var a = new Demo('Peter');
单例模式:var b = new ProxyDemo('Peter'); 

二. 惰性单例模式:只在需要的时候才创建该单例; 
以下是通用惰性单例的创建方法:

var getSingle = function(foo){
  var single = null;
  return function(){
    return single || (single = foo.apply(this,arguments));
  }
};

用法:

var createLoginLayer = function(){
  var frag = document.createDocumentFragment();
  var div = document.createElement('div');
  div.style.display = 'none';
  //以下给div添加其它登录元素
  ...
  document.body.appendChild(frag.appendChild(div));
  return div;
}
var createSingleLoginLayer = getSingle(createLoginLayer);
//当用户第一次点击按钮(id = 'lgBtn')时,来创建并显示登录窗口,之后重复点击按钮不会重复创建;
document.getElementById('lgBtn').onclick = function(){
  var lg = createSingleLoginLayer();
  lg.style.display = 'block';
}

附:缓存函数的计算结果,如计算一个数的数列 
以下是不缓存的写法,非常慢!

function foo(n){
  results = n < 2 ? n : foo(n - 1) + foo(n - 2);
  return results;
}
console.log(foo(40));//得计算好几秒

以下是缓存写法,基本瞬间出结果!

var cache = {};
function foo(n){
  if(!cache[n]){
    cache[n] = n < 2 ? n : foo(n - 1) + foo(n - 2);
  }
  return cache[n];
}
console.log(foo(100));

更好的写法:

var foo = (function(){
  var cache = {};
  return function(n){
    if(!cache[n]){
      cache[n] = n < 2 ? n : foo(n - 1) + foo(n - 2);
    }
    return cache[n];
  };
})();
console.log(foo(100));

参考文献:
 《JavaScript模式》
 《JavaScript设计模式与开发实践》

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

Javascript 相关文章推荐
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
js生成随机数方法和实例
Jan 17 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
很酷的星级评分系统原生JS实现
Aug 25 #Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 #Javascript
轻松掌握JavaScript策略模式
Aug 25 #Javascript
Javascript 6里的4个新语法
Aug 25 #Javascript
Javascript实现代码折叠功能
Aug 25 #Javascript
深入浅出ES6之let和const命令
Aug 25 #Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 #Javascript
You might like
php面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[06:36]吞吞映像top1
2014/06/20 DOTA
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python中reload重载实例用法
2020/12/15 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
html+css3实现的登录界面
2020/12/09 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
西班牙手机之家:Phone House
2018/10/18 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
低碳环保倡议书
2014/04/14 职场文书
个人安全生产责任书
2014/07/28 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
公司离职证明标准范本
2014/10/05 职场文书
党员带头倡议书
2015/04/29 职场文书
永远是春天观后感
2015/06/12 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python