JavaScript惰性单例与vue性能优化应用

2019-03-23 本文已影响0人罗坤_23333

设计模式是对语言不足的补充
—— 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]