作为一个半路出家的前端，随着项目经验的积累，也越来越意识到原生js的博大精深，最近正在研究js设计模式，接下来每学一个设计模式就是写篇文章做笔记，其实主要还是代码和设计思想的结合，努力体会，多思考合适自己项目中的应用场景，争取实际应用到实际项目中。
话不多说，进入主题，js设计模式之：单例模式
单例模式定义: 保证一个类仅有一个实例，并提供一个访问它的全局访问点
上代码：
标准单例模式
//方法1
//标准单例模式
var Singleton = function(name){
this.name = name
}
Singleton.prototype.getName = function(){
console.log(this.name);
}
Singleton.getInstance = (function(){ //注意这里的getInstance方法是静态方法
var instance = null
//这里使用闭包，作用在于只有当调用到getInstance方法时才进行单例控制，这是一种惰性单例模式，相比标准单例中将instance变量放在Singleton构造函数中性能更好
return function(){
if(!instance){
instance = new Singleton(name)
}
return instance
}
})()
var a = Singleton.getInstance('nitx')
var b = Singleton.getInstance('sxm')
console.log(a === b); //true
上述通过Singleton.getInstance来获取Singleton类的唯一对象，这种方法相对简单，但有个问题，增加了类的不透明性，Singleton类的使用者必须知道这是一个单例类，跟以往通过new XXX的方式来获取对象实例不同，这里需要使用Singleton.getInstance来获取对象。这种写法意义不大。
//方法二
//透明的单例模式，用户从这个类中创建对象时，可以像使用其他任何普通类一样，通过new创建类实例。下面单例类的作用是在页面中创建唯一的div节点。
var CreateDivWrap = (function(){
var instance = null;
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 c = new CreateDivWrap('nitx')
var d = new CreateDivWrap('sxm')
console.log(c === d); //true
上述代码中，还有一个缺点，为了把instance封装起来，使用了自执行匿名函数和闭包，并且让这个匿名函数返回真正的Singleton构造方法CreateDiv，这增加程序复杂度，CreateDiv方法负责两件事，一件是创建对象和执行初始化init方法，第二是保证只有一个对象，这种操作违背“单一职责原则”，假如将来要利用这个类在页面中创建多个类，也就是让这个类从单例类变成普通类，那就得改写CreateDivWrap构造函数，去掉控制唯一对象的那一段代码，麻烦！解决这个问题的方法是使用 代理实现单例模式
//方法三：
//先创建普通类，作用是创建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，其作用是控制CreateDiv类创建唯一对象
var ProxySingletonCreateDiv = (function(){
var instance = null
return function(html){
if(!instance){
instance = new CreateDiv(html)
}
return instance
}
})()
var e = new ProxySingletonCreateDiv('nitx')
var f = new ProxySingletonCreateDiv('sxm')
console.log(e === f);
通过引入代理类的方式，同样完成一个单例模式的编写，但和之前方法一、二相比，把负责管理单例的逻辑移到了代理类ProxySingletonCreateDiv中，这样CreateDiv就是一个普通类，CreateDiv类和ProxySingletonCreateDiv类组合起来就是一个单例类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button type="button" id="btn1">登录</button>
</body>
<script>
//添加dom普通写法，非单例，可无限添加dom，如需保持只有一个dom时，在点击事件中加入删除先前dom的操作
var createLoginLayer = function(){
var div = document.createElement('div')
div.innerHTML = '我是登录弹窗'
div.style.display = 'none'
document.body.appendChild(div)
return div
}
document.getElementById('btn1').onclick = function(){
var loginLayer = createLoginLayer()
loginLayer.style.display = 'block'
}
//添加dom单例写法，只能添加一个dom节点，这种写法缺点是把单例逻辑耦合在具体业务代码中，难以利用
var createLoginLayer = (function(){
var singleResult = null;
return function(){
if(!singleResult){
div = document.createElement('div')
div.innerHTML = '我是登录弹窗'
div.style.display = 'none'
document.body.appendChild(div)
}
return singleResult = div
}
})()
document.getElementById('btn1').onclick = function(){
var loginLayer = createLoginLayer()
loginLayer.style.display = 'block'
}
//单独抽出的单例逻辑
var getSingle = function(fn){
var result = null; //创建一个变量来标记是否创建过对象，如果是则下次直接返回已创建过的对象
return function(){
if(!result){
result = fn.apply(this, arguments) //执行createLoginLayer函数结果返回div
}
return result
}
}
var createLoginLayer = function(){
div = document.createElement('div')
div.innerHTML = '我是登录弹窗'
div.style.display = 'none'
document.body.appendChild(div)
return div
}
var createSingleLoginLayer = getSingle(createLoginLayer)(1, 2, 3)
document.getElementById('btn1').onclick = function(){
var loginDialog = createSingleLoginLayer()
loginDialog.style.display = 'block'
}
//第三个例子中，把创建实例对象的职责和管理单例的职责分别放置在两个方法中，这两个方法可以独立变化而互不影响，当组合在一起时，就完成了创建唯一实例对象的功能
</script>
</html>
单例模式使用要点，应结合闭包、高阶函数、惰性单例、创建实例对象与管理单例职责的方法拆分。
网友评论