JS设计模式-单例

2016/11/10
函数作为JS第一等对象，灵活的使用可以帮助我们写出优雅的代码，甚至能节省内存空间提高运行效率。
这次简单讲讲单例模式在项目中的应用。

原理

我们经常通过new关键字实例化一个类（其实就是函数），而实例化之后，会在内存堆中分配内存空间。
直到这个实例赋值为null或者实例所在的作用域跳出，被分配的内存空间才被收回。

需求

比如项目中的一个页面，有许多用户的操作会导致弹窗提示。
那么此时，我们会在不同的操作事件中实例化这个dialog类，然后调用实例的弹出方法。
这时我们可以使用这种模式，让每一次的new操作得到的永远是第一次实例化的那个实例，只需要改变弹出内容即可，这样就会减少内存开销。

如何做

Dialog类

var Dialog = function(options){
  // 初始化弹出框
}
Dialog.prototype.pop = function(){
  // 弹出方法
}

实例化Dialog（非单例模式）

var dialog1 = new Dialog();
var dialog2 = new Dialog();

console.log(dialog1 === dialog2); // false

实例化Dialog（单例模式）

var getSingleton = function(){
  var instance;
  // 这里使用闭包
  // 下面这个 function 保持着变量 instance 的引用
  return function(){
    if(!instance){
      // 不存在就实例化
      instance = new Dialog();
    }
    return instance;
  }
}

var dialog1 = getSingleton();
var dialog2 = getSingleton();

console.log(dialog1 === dialog2); // true

再改进一点

为了更好的体现面向对象的设计思路，可以把实例化的操作单独拿出来

var getInstance = function(){
  return new Dialog();
}

var getSingleton = function(fn){
  var instance;
  return function(){
    return instance || (instance = fn.apply(fn, arguments));
  }
}

var getDialog = getSingleton(getDialog);

var dialog1 = getDialog();
var dialog2 = getDialog();

console.log(dialog1 === dialog2); // true