《js 设计模式与开发实践》读书笔记 4
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式是一种常用的模式，我们点击登录按钮的时候，页面会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会创建一次，那这个登录浮窗就适合用单例模式来创建。
要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类创建过对象，如果是，则在下一次获取该类的实例，直接返回之前创建的对象。
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
}
var a = Singleton.getInstance('seven1')
var b = Singleton.getInstance('seven2')
console.log(a === b) //true
我们通过 Singleton.getInstance 来获取 Singleton 类的唯一对象，这种方式相对简单，但有一个问题，就是增加了这个类的不透明性，Singleton 类的使用者必须知道这是一个单例类，跟以往通过 new XXX 的方式来获取对象不同，这里要使用 Singleton.getInstance 来获取对象。
我们现在写一个透明的单例类，用户从这个类中创建对象的时候，可以像使用其他任何普通类一样。写一个创建 div 的单例类。作用是负责在页面中创建唯一的 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 = new CreateDiv('seven1')
var b = new CreateDiv('seven2')
console.log(a === b)
我们这段代码中使用了 iife 和闭包，并且让这个匿名函数返回真正的 Singleton 构造方法，这增加了一些程序的复杂度，阅读起来也不是很舒服。在 CreateDiv 的构造函数实际上负责了两件事情。第一是创建对象和执行初始化 init 方法，第二是保证只有一个对象。这是一种不好的做法，有一个单一职责原则的概念。所以需要在优化下。
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('ddiv1')
var a = new ProxySingletonCreateDiv('ddiv2')
console.log(a === b)
我们引入代理类的方式，来解决上面的问题。通过引入代理类的方式，我们同样完成了一个单例模式的编写，跟之前不同的是，现在我们把负责管理单例的逻辑移到了代理类 ProxySingletonCreateDiv 中，这样一来，createDiv 就变成了一个普通的类。这个例子其实就是缓存代理的应用之一。
上面写的单列模式的实现，更多的是接近传统面向对象语言中的实现，单例对象从类中创建来，在以类为中心的语言中，这是很自然的做法。但 js 其实是一门 class-free 语言。所以生搬单例模式的概念并无意义。在 js 中创建对象的方法非常简单，既然我们需要一个唯一的对象，为什么要为它先创建一个类呢。传统的单例模式实现在 js 中并不适用。单例模式的核心是确保只有一个实例，并提供全局访问。
全局变量不是单例模式，但在 js 开发中，我们经常把全局变量当成单例来使用。当用这种方式创建对象 a 时，对象 a 确实是独一无二的。如果 a 变量被声明在全局作用域下，则我们可以在代码中的任何位置使用这个变量，全局变量提供给全局访问是理所当然的。这样就满足了单例模式的两个条件。
var a = {}
但是全局变量存在很多问题，它很容易造成命名空间污染。在大中型项目中，如果不加以限制和管理，程序中可能存在很多这样的变量。js 中的变量也容易被不小心覆盖。像上面的对象 a，随时有可能被别人覆盖。
作为普通的开发者，我们有必要尽量减少全局变量的使用，即使需要，也要把它的污染降到最低。以下几种方式可以相对降低全局变量带来的命名污染。1 使用命名空间。适当使用命名空间，并不会杜绝全局变量，但可以减少全局变量的数量。最简单的方法依然是用对象字面量的方式：把 a 和 b 都定义为 namespace1 的属性，这样可以减少变量和全局作用域打交道的机会。使用闭包来封装私有变量。
var namespace = {
a: function () {
console.log('1')
},
b: function () {
console.log('2')
}
}
惰性单例指的是在需要的时候才创建对象实例。惰性单例是单例模式的重点，上面代码中中，instance 实例对象总是在我们调用 Singleton.getInstance 的时候才被创建，而不是在页面加载好的时候就创建。比如我们要开发一个网站里面有登录弹窗。
<button id="loginBtn">登录</button>
<script>
var loginLayer = (function () {
var div = document.createElement('div')
div.innerHTML = '我是登录浮窗'
div.style.display = 'none'
document.body.appendChild(div)
return div
})()
document.getElementById('loginBtn').onclick = function () {
loginLayer.style.display = 'block'
}
</script>
这个方式有一个问题，这个浮窗一开始就被创建好，很有可能白白浪费一些 DOM 节点。改写一下代码，用户点击登录按钮的时候才开始创建弹窗.
<button id="loginBtn">登录</button>
<script>
var createLoginLayer = function () {
var div = document.createElement('div')
div.innerHTML = '我是登录浮窗'
div.style.display = 'none'
document.body.appendChild(div)
return div
}
document.getElementById('loginBtn').onclick = function () {
var loginLayer = createLoginLayer()
loginLayer.style.display = 'block'
}
</script>
这种虽然达到了惰性的目的，但失去了单例的效果。当我们每次点击登录按钮的时候，都会创建一个新的登录浮窗 div。虽然我们可以在点击浮窗上的关闭按钮时把这个浮窗从页面中删除掉，，但这样频繁地创建和删除节点明显是不合理，也是不必要的。可以使用一个变量来判断是否已经创建过登录浮窗。
<button id="loginBtn">登录</button>
<script>
var createLoginLayer = (function () {
var div
return function () {
if (!div) {
div = document.createElement('div')
div.innerHTML = '我是登录浮窗'
div.style.display = 'none'
document.body.appendChild(div)
}
return div
}
})()
document.getElementById('loginBtn').onclick = function () {
var loginLayer = createLoginLayer()
loginLayer.style.display = 'block'
}
</script>
我们上面完成了一个可用的惰性单例，但是他还有一些问题。这段代码仍然是违反单一职责原则的。创建对象和管理单例的逻辑都放在 createLoginLayer 对象内部。如果我们下次需要创建页面唯一的 iframe，或者 script 标签，用来跨域请求数据，就必须得如法炮制，把 createLoginLayer 函数几乎照抄一遍。
var createIframe = (function () {
var iframe
return function () {
if (!iframe) {
iframe = document.crateElement('iframe')
iframe.style.display = 'none'
document.body.appendChild(iframe)
}
return iframe
}
})()
我们需要把不变的部分隔离出来，先不考虑创建一个 div 和创建一个 iframe 有多少差异，管理单例的逻辑其实是完全可以抽离出来的，这个逻辑始终是一样的。用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象：
var obj
if (!obj) {
obj = xxx
}
我们把管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在 getSingle 函数内部，创建对象的方法当作参数动态传入 getSingle 函数。
var getSingle = function (fn) {
var result
return function () {
return result || (result = fn.apply(this, arguments))
}
}
接下来讲用于创建浮窗的方法用参数 fn 的形式传入 getSingle,我们不仅可以传入 createLoginLayer,还能传入 createScript,createIframe,createXhr。之后再让 getSingle 返回一个新的函数，并且用一个变量 result 来保存 fn 的计算结果。result 变量因为身在闭包中，它永远不会被销毁。在将来的请求中，如果 result 已经被复制，那么它将返回这个值。
var createLoginLayer = function () {
var div = document.createElement('div')
div.innerHTML = '我是登录浮窗'
div.style.display = 'none'
document.body.appendChild(div)
return div
}
var createIframe = function () {
var iframe = document.createElement('iframe')
document.body.appendChild(iframe)
return iframe
}
var getSingle = function (fn) {
var result
return function () {
return result || (result = fn.apply(this, arguments))
}
}
var createSingleLoginLayer = getSingle(createLoginLayer)
var createSingleIframe = getSingle(createIframe)
document.getElementById('loginBtn').onclick = function () {
var loginLayer = createSingleLoginLayer()
loginLayer.style.display = 'block'
}
document.getElementById('iframeSingle').onclick = function () {
var singleIframe = createSingleIframe()
singleIframe.src = 'https://baidu.com'
}
单例模式一种简单但非常实用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在两个不同的方法中，这两个方法组合起来才具有单例模式的威力。
