JavaScript设计模式----单例模式
2016-07-23 11:05
453 查看
声明:这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记
或者使用闭包的形式创建单例模式,同时符合惰性单例的特性
这样编写单例模式的缺点:
为了把
引入代理实现单例模式的特点:
我们负责管理单例的逻辑移到了代理类
惰性单例指的是在需要的时候才创建对象的实例。惰性单例是单例模式的重点。
代码解析:
这里的对惰性单例的实现主要是只有单例了网页上的登录按钮,才会去创建,登录框的
通用的单例创建的例子就是通过封装一个
1.单例模式的特点和定义
保证一个类仅有一个实例,并且提供一个访问它的全局访问点。2.传统面向对象语言的单例模式
2.1传统语言描述的单例模式JavaScript实现
var Singleton = function(name) { this.name = name; this.instance = null; }; Singleton.prototype.getName = function() { alert(this.name); }; Singleton.getInstance = function(name) { if (!this.instance) { this.instance = new Singleton(name); } return this.instance; }; var a = Singleton.getInstance('seven1'); var b = Singleton.getInstance('seven2');
或者使用闭包的形式创建单例模式,同时符合惰性单例的特性
var Singleton = function(name) { this.name = name; }; Singleton.prototype.getName = function() { alert(this.name); }; //利用闭包的特性创建单例,同时符合惰性单例的特性 Singleton.getInstance = (function(name) { var instance; return function(name){ if (!instance) { instance = new Singleton(name); } } })(); var a = Singleton.getInstance('seven1'); var b = Singleton.getInstance('seven2'); console.log(a===b); //true
2.2透明的单例模式:
//反面的单例模式的例子 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('seven1'); var b = new CreateDiv('seven2');
这样编写单例模式的缺点:
为了把
instance封装起来,我们使用了自执行的匿名函数和闭包,并且让这个匿名函数返回真正的
Singleton构造方法,这增加了一些程序的复杂度。
CreateDiv的构造函数负责了两件事情。1.创建对像和执行初始化
init方法,第二是保证只有一个对象。不符合设计模式中的单一职责的概念。
2.3引入代理实现单例模式
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('seven1'); var b = new ProxySingletonCreateDiv('seven2');
引入代理实现单例模式的特点:
我们负责管理单例的逻辑移到了代理类
ProxySingletonCreateDiv中。这样一来,
CreateDiv就变成了一个普通的类,他跟
ProxySingletonCreateDiv组合起来可以达到单例模式的效果。
3.JavaScript的单例模式对比
在以上的代码中实现的单例模式都混入了传统面向对象语言的特点。而没有利用JavaScript这们语言的特点来实现一个单例模式。3.1惰性单例的例子
概念描述:惰性单例指的是在需要的时候才创建对象的实例。惰性单例是单例模式的重点。
var createLoginLayer=(function(){ var div; return function(){ if(!div){ div=document.createElement('div'); //创建一个登录框 } return div; } })(); document.getElementById('loginBtn').onclick=function(){ var loginLayer=createLoginLayer(); loginLayer.style.display='block'; };
代码解析:
这里的对惰性单例的实现主要是只有单例了网页上的登录按钮,才会去创建,登录框的
dom节点,并且只是创建一次。
3.2通用的单例模式例子
根据3.1的代码示例,我们的单例对像,但是并不是通用的,比如我们要创建的不是div而是
iframe,那要怎么办呢?
//获取单例 var getSingle = function(fn){ var result; return function (){ return result || (result=fn.apply(this,arguments)); }; }; //创建div登录框 var createLoginLayer=function (){ var div= document.createElement('div'); div.innerHTML='我是登录框'; document.body.appendChild(div); return div; }; //创建iframe的dom节点 var createIframe=function(){ //创建irame节点的代码 } var createSingleLoginLayer = getSingle(createLoginLayer); var createSingleIframe=getSingle(createIframe); var loginLayer1 = createSingleLoginLayer(); var loginLayer2 = createSingleLoginLayer(); var iframe1=createSingleIframe(); var iframe2=createSingleIframe(); console.log(loginLayer1 === loginLayer2);
通用的单例创建的例子就是通过封装一个
getSingle需要实现单例模式的对象。而且只是会只创建一次。因为使用了闭包的原因通过
getSingle创建的
result会在内存中一直存在不会销毁(除非页面关闭,或者手动释放)。
总结:
单例模式是一种简单但非常实用的模式,特别是惰性单例技术,在合适的时候才创建对像,并且只创建唯一的一个。更奇妙的是,创建对象和管理单例的职责被分布在两个不同的方法中,这两个方法组合起来才具有单例模式的威力。相关文章推荐
- JavaScript获取当前根目录
- JS进制转
- javascript运行机制之执行顺序详解
- 30行代码实现JavaScript中的MVC
- 可视化组件——iChart.js定制
- JavaScript中this指针指向的彻底理解
- javascript内存管理介绍
- 手写Json转换
- formpanel表单与json数据绑定
- jsp传参 servlet接收中文乱码问题的解决方法
- JavaScript 中的命名空间
- js的各种排序算法实现(总结)
- js中window.open()的所有参数详细解析
- 用canvas画了个钟表,来玩玩吧
- js事件驱动机制 浏览器兼容处理方法
- javaScript事件机制兼容【详细整理】
- 函数表达式
- 普通数组转化为JSONArray
- javascript中confirm(确认),alert(警告),prompt(提问)的用法及其示例
- javascript权威指南--不可变原始值和可变对象引用