JavaScript设计模式二（单例模式）
这边文章主要是JavaScript中的单例模式
定义：
保证一个类仅有一个实例，并提供一个访问它的全局访问点
其实我们的日常开发中或多或少的用到了单例模式的方法。例如我们做Electron开发的过程中，点击一个按钮创建了一个窗口，后续点击的时候，如果窗口已经存在了就focus窗口，否则创建；或者我们经常会创建一个定时任务，同时把定时任务赋值给一个变量，如果变量不存在就创建，否则不创建。但是大多数情况我们都是利用的是一个变量来控制的。接下来我们看看代码的实现
实现单例模式
其实上面的介绍我们已经说了实现单例模式的思路，就是通过一个变量来控制
var Singleton=function(name) {
this.name=name;
this.instance=null;
}
Singleton.prototype.getName=function(){
console.log(this.name);
}
Singleton.getInstance=function(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
//这种写法借助了this.instance，其实可以不需要
var Singleton = function(name) {
this.name=name;
}
Singleton.prototype.getName=function(){
console.log(this.name);
}
Singleton.getInstance=(function(){
var instance = null;
return function(name) {
if(!instance) {
instance = new Singleton(name);
}
return instance;
};
})();
使用方法：
var a = Singleton.getInstance('a');
var b = Singleton.getInstance('b');
a===b
这种方式实现了我们说的单例模式，但是有一个很明显的缺点，就是我们实例化的时候不是使用的new方法来实例化，而是用的getInstance方法，也就是说我们必须知道这个类是单例类，才能这样去用，这就增加了不透明性。
透明的单例模式
所谓的透明的单例模式，就是我们可以像正常的类那样去new一个单例类。
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('div');
var b = new CreateDiv('div');
a===b
之所以能够通过new来创建一个单例类的实例，是因为CreateDiv
的返回值是一个构造函数，这个构造函数做了两件事情
- 创建对象和执行init方法
- 保证只有一个对象
我们可以想象如果需求变成了，我们需要CreateInput之类，是不是一直要修改这个类呢？
代理实现单例模式
利用代理就可以很好的解决上面的问题
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('div');
var b = new ProxySingletonCreateDiv('div');
利用代理类，我们遵循了单一职责的原则，让代理类负责单例的逻辑，CreateDiv变成一个普通的创建html的类，两者结合达到单例模式的效果
JavaScript中的单例模式
JavaScript单例模式的核心是：
确保只有一个实例，并提供全局访问
与传统的面向对象语言不一样，JavaScript可以定义全局变量，而且我们通常认为全局变量就是一个单例，但是这种使用方式很容易造成命名空间的污染，针对这种问题有两种办法
- 使用命名空间
最简单的就是使用字面量常量：
var namespace1 = {
a: function(){},
b: 'bbbb'
}
- 利用闭包封装变量
var user = (function(){
var _user = 'hahaha';
return {
setUserName: function(name) {
_user = name;
},
getUserName: function(){
console.log(_user);
}
}
})();
惰性单例
定义:
惰性单例是指需要时才创建的单例
上面的那几种方法实际上就是惰性单例，但是那些事面向对象的，我们看看JavaScript中的惰性单例，看一段PC版的代码吧
let historyWindow = null;
ipc.on(cfg.CHANNEL.LOCAL.CHAT.SEARCH_HISTORY, function(event, arg) {
if (!historyWindow) {
historyWindow = new BrowserWindow({
width: 621,
height: 540,
minWidth: 621,
minHeight: 540,
frame: false,
show: false,
});
historyWindow.setAutoHideMenuBar(false);
historyWindow.loadURL('file://' + __dirname + '/../../../client/views/history.html');
if (process.env.NODE_ENV == 'dev') {
historyWindow.webContents.openDevTools();
}
historyWindow.on('close', function() {
historyWindow.webContents.closeDevTools();
});
historyWindow.on('closed', function() {
glb.set(cfg.GLB.HISTORY_WINDOW, null);
glb.remove(cfg.GLB.ADD_MEMBER_WINDOW);
historyWindow = null;
});
historyWindow.webContents.on('did-finish-load', function() {
glb.set(cfg.GLB.HISTORY_WINDOW, historyWindow);
historyWindow.show();
historyWindow.focus();
historyWindow.webContents.send(cfg.CHANNEL.LOCAL.CHAT.OPEN_HISTORY_WINDOW_RECV, arg);
});
} else {
historyWindow.webContents.send(cfg.CHANNEL.LOCAL.CHAT.OPEN_HISTORY_WINDOW_RECV, arg);
if (historyWindow.isMinimized()) {
historyWindow.show();
} else {
historyWindow.focus();
}
}
});
这段代码的逻辑是，点击历史消息的icon，创建一个历史消息的弹出框，后面如果继续点击，就把之前的弹出框focus。
这里其实还有优化的空间，我们知道electron创建一个新的BrowserWindow是很慢的，所以我们创建一次之后，用户点击关闭，其实可以隐藏起来，并不是实际的关闭，这样当用户点击第二次的时候就省略了创建窗口的过程，直接渲染数据就可以。
网友评论