javascript设计模式与开发实践读书笔记之单例模式
1.定义
保证一个类只有一个实例,并提供一个访问它的全局访问点。
2. 应用场景
当我们单击登录按钮的时候,页面中会出现一个登录浮窗,而这个登录浮窗是唯一的,无论单击多少次登录按钮,这个按钮都只会被创建一次,那么这个登录浮窗就适合用单例模式来创建。
3.实现单例模式
3.1方法
用一个变量来标志当前是否已经为某个类创建过对象,如果是,则是下一次获取该类的实例时,直接返回之前创建的对象。
var Singleton = function(){
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.getIntance('sevn1');
var b = Singleton.getIntance('sevn2');
alert(a==b);//true
或者
var Singleton = function(){
this.name = name;
this.instance = null;
};
Singleton.prototype.getName = function(){
alert(this.name);
};
Singleton.getInstance =( function(){
var instance = null;
return function(name){
if(!this.instance){
this.instance = new Singleton(name);
}
return this.instance;
}
})();
通过Singleton.getInstance来获取Singleton类的唯一对象,这种方式相对简单,但有一个问题,就是增加了这个类的"不透明性",Singleton类的使用者必须知道这是一个单例模式。跟以往通过 new 的方式来获取对象不同,这里偏要使用Singleton.getInstance来获取对象。
3.2 透明的单例模式
实现一个透明的单例类,用户从这个类中创建对象的时候,可以像使用其他任何普通类一样。在下面的例子中,我们将使用CreateDiv单例类,它的作用是负责在页面中创建唯一的div节点,代码如下:
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 = Singleton.CreateDiv('sevn1');
var b = Singleton.CreateDiv('sevn2');
alert(a===b);//true
在这段代码中,CreateDiv的构造函数实际上负责了两件事情。第一是创建对象和执行初始化init方法,第二是保证只有一个对象。
加入我们某天需要利用这个类,在页面中创建千千万万的div,即要让这个类从单例类变成一个普通的可产生多个实例的类,那我们必须改写CreateDiv构造函数,把控制创建唯一对象的那一段去掉,这种修改会给我们带来不必要的烦恼。
3.3用代理实现单例模式
首先在CreateDiv构造函数中,把负责管理单例模式的代码移除出去,使他成为一个普通的创建div的类:
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);
}
接下来引入代理类proxySingletonCreateDiv:
var proxySingletonCreateDiv = ( function(){
var instance = null;
return function(name){
if(!this.instance){
this.instance = new Singleton(name);
}
return this.instance;
}
})();
var a = new proxySingletonCreateDiv('sevn1');
var b = new proxySingletonCreateDiv('sevn2');
alert(a===b);//true
我们把负责管理单例的逻辑移到了代理类proxySingletonCreateDiv中。
3.4javascript中的单例模式
单例模式的核心:确保只有一个实例,并提供全局访问。
全局变量不是单例模式,但在javascript中,我们经常会把全局变量当成单例来使用。
var a = {};
当用这种方式创建对象a时,对象a确实是独一无二的。如果a变量被声明在全局作用域下,则我们可以在代码中的任何位置使用这个便令,全局变量提供给全局访问是理所当然的。
全局变量的问题:命名空间污染,javascript中的变量也很容易被不小心覆盖。
作为普通的开发者,我们有必要尽量减少全局变量的使用,即使需要,也要把它的污染降到最低。
以下几种方式可以相对降低全局变量带来的命名污染
-
使用命名空间
适当的使用命名空间,并不会杜绝全局变量,但可以减少全局变量的数量。
最简单的方式是使用对象字面量的方式:
var namespace1 = { a:function(){ alert(1); }, b:function(){ alert(2); } }
把a和b都定义为namesapce1的属性,这样就可以减少变量和全局变量打交道的机会。另外我们还可以动态的创建命名空间,
var MyApp = {}; MyApp.namespace = function(name){ var parts = name.split('.'); var current = Myapp; for(var i in parts){ if(!current[parts[i]]){ current[parts[i]] = {}; } current = current[parts[i]] ; } }; Myapp.namespace('event'); Myapp.namespace('dom.style'); console.dir(Myapp);
上述代码等价于:
var Myapp = { event:{}, dom:{ style:{} } };
-
使用闭包封装私有变量
把一些变量封装在闭包的内部,只暴露一些接口跟外界通信:
var user = (function(){ var _name = 'sven'; var _age = 29; return{ getUserInfo:function(){ return _name + "-" + _age; } } })()
用下划线来约定私有变量_name和 _age ,它们被封装在闭包产生的作用域中,外部是访问不到两个变量的,这就避免了对全局的命令污染。
3.5惰性单例
惰性单例指的是在需要的时候才创建对象实例。
书中例子可以看这篇博客:https://www.jianshu.com/p/0a97b20a59c2
3.6通用的惰性单例
管理单例的逻辑其实是一样的:用一个变量来标志是否创建过对象,如果是,则在下次直接返回这个已经创建好的对象:
var obj;
if(!obj){
obj = ***;
}
将管理单例的逻辑从原来的代码中抽离出来,这些逻辑被封装在getSingle函数内部,创建对象的方法fn被当成参数动态传入getSingle函数:
var getSingle = function(fn){
var result;
return function(){
return result || (result = fn.apply(this,argument));//判断result是否为空
};
}
result因为在闭包中不会被销毁。
参考:《javascript设计模式与开发实践》
https://www.jianshu.com/p/0a97b20a59c2