设计模式是对语言不足的补充
—— Peter Norvig
单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点
单例模式使一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象等。
在JavaScript开发中，单例模式的用途同样非常广泛。试想一下，当我们单击登录按钮的时候，页面会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。
什么是惰性？
在编程语言理论中，惰性求值（Lazy Evaluation），又译为惰性计算、懒惰求值，也称为传需求调用（call-by-need），是一个计算机编程中的一个概念，它的目的是要最小化计算机要做的工作。
var obj = 'hello,hello'
//...
if(!obj){
obj = 'hello,hello'
}
简单理解：对于某些事情我们已经做过并有了成果，就不需要重复去做，直接拿做好的成果来使用就可以了。
正如上述代码，用一个变量来标志是否创建过对象，如果是，则在下次直接返回这个已经创建好的对象。
通用的惰性单例
var getSingle = function(fn){
var result
return function(){
return result || ( result = fn.apply(this, arguments) )
}
}
getSingle内部返回一个新的函数，并且用一个变量result来保存fn的计算结果。result变量因为身在闭包中，它永远不会被摧毁。在将来的请求中，如果result已经被赋值，那么它将返回这个值。代码如下：创建登录浮窗 效果预览.html
var createLoginLayer = function(){
var div = document.createElement( 'div' )
div.innerHTML = '我是登录浮窗'
div.style.display = ' none '
document.body.appendChild( div )
return div
}
//预渲染浮窗
var LoginLayer = getSingle( createLoginLayer )
//打开浮窗
LoginLayer().style.display = 'block'
//关闭浮窗
LoginLayer().style.display = 'none'
当然现在都9012年了，已经很少有完全直接操作DOM的工程化作业，很多时候都会去用诸如vue,react等渐进式框架去开发。但是设计模式的理念仍然能运用到现代开发模式中。
Vue与惰性单例应用
Vue中有v-if控制DOM的渲染与移除，v-show控制DOM的展示与隐藏，各有其优点与用处。下面也是一个Modal组件案例
详细代码
v-if
QQ截图20190323213554.png
v-show
QQ截图20190323213854.png
思考
这里的Modal还比较小，频繁的渲染不会影响到性能。但如果遇到一些较重功能（比如弹出框内需要展示PDF或者其他依赖SDK的功能），
使用v-show会出现在首次加载页面时，由于也要加载上述出现的需求，甚至是一些占很大资源却对于用户不常有的功能，加载时间会被无意义地拖长。
使用v-if会出现每次打开时等待时间较长，且每次操作显示与隐藏都不可避免。
惰性单例有两大优点：
单例 —— 只被创建一次
惰性 —— 只加载已“缓存好的”
为此可以这样实现：
v-if主动控制首次不加载，需要时才加载
v-show首先默认为true，只在v-if为ture之后再控制显示与隐藏
httpjsrunnetvZYKpedit.gif
- [1] JavaScript设计模式与开发实践 [M] p.60
- [2] 维基百科-惰性求值[N]
网友评论