javascript设计模式——单例模式

时间 2019-11-16

原文原文链接

前面的话

　　单例模式是指保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式是一种经常使用的模式，有一些对象每每只须要一个，好比线程池、全局缓存、浏览器中的window对象等。在javaScript开发中，单例模式的用途一样很是普遍。试想一下，单击登陆按钮时，页面中会出现一个登陆浮窗，而这个登陆浮窗是惟一的，不管单击多少次登陆按钮，这个浮窗都只会被建立一次，那么这个登陆浮窗就适合用单例模式来建立html

标准单例

　　要实现一个标准的单例模式并不复杂，无非是用一个变量来标志当前是否已经为某个类建立过对象，若是是，则在下一次获取该类的实例时，直接返回以前建立的对象。代码以下：java

var Singleton = function( name ){ 
  this.name = name; 
  this.instance = null;
};
Singleton.prototype.getName = function(){ 
  alert ( this.name );
};
Singleton.getInstance = function( name ){ 
  if ( !this.instance ){
    this.instance = new Singleton( name );
  }
  return this.instance;
};
var a = Singleton.getInstance( 'sven1' ); 
var b = Singleton.getInstance( 'sven2' );
alert ( a === b );    // true

　　或者：ajax

var Singleton = function( name ){ 
  this.name = name;
};
Singleton.prototype.getName = function(){ 
  alert ( this.name );
};
Singleton.getInstance = (
  function(){ 
    var instance = null;
    return function( name ){
      if ( !instance ){
        instance = new Singleton( name );
      }
    })();
  }
  return instance;

　　经过Singleton.getInstance来获取Singleton类的惟一对象，这种方式相对简单，但有一个问题，就是增长了这个类的“不透明性”，Singleton类的使用者必须知道这是一个单例类，跟以往经过new XXX的方式来获取对象不一样，这里偏要使用Singleton.getInstance来获取对象跨域

　　虽然已经完成了一个单例模式的编写，但这段单例模式代码的实际意义并不大浏览器

透明单例

　　如今的目标是实现一个“透明”的单例类，用户从这个类中建立对象时，能够像使用其余任何普通类同样。在下面的例子中，将使用CreateDiv单例类，它的做用是负责在页面中建立惟一的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('sven1');
  var b = new CreateDiv('sven2');
  alert(a === b);    // true

　　虽然如今完成了一个透明的单例类的编写，但它一样有一些缺点。为了把instance封装起来，使用了自执行的匿名函数和闭包，而且让这个匿名函数返回真正的Singleton构造方法，这增长了一些程序的复杂度，阅读起来也不是很舒服闭包

　　上面的代码中，CreateDiv构造函数实际上负责了两件事情。第一是建立对象和执行初始化init方法，第二是保证只有一个对象。这是一种很差的作法，至少这个构造函数看起来很奇怪。假设某天须要利用这个类，在页面中建立千千万万的div，即要让这个类从单例类变成一个普通的可产生多个实例的类，那必须得改写CreateDiv构造函数，把控制建立惟一对象的那一段去掉，这种修改会带来没必要要的烦恼app

代理实现单例

　　如今经过引入代理类的方式，来解决上面提到的问题。依然使用上面的代码，首先在CreateDiv构造函数中，把负责管理单例的代码移除出去，使它成为一个普通的建立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
  var ProxySingletonCreateDiv = (function () {
    var instance;
    return function (html) {
      if (!instance) {
        instance = new CreateDiv(html);
      }
      return instance;
    }
  })();
  var a = new ProxySingletonCreateDiv('sven1');
  var b = new ProxySingletonCreateDiv('sven2');
  alert(a === b);

　　经过引入代理类的方式，一样完成了一个单例模式的编写，跟以前不一样的是，如今把负责管理单例的逻辑移到了代理类proxySingletonCreateDiv中。这样一来，CreateDiv就变成了一个普通的类，它跟proxySingletonCreateDiv组合起来能够达到单例模式的效果this

惰性单例

　　惰性单例指的是在须要的时候才建立对象实例。惰性单例是单例模式的重点，这种技术在实际开发中很是有用

　　下面继续以登陆框的例子来讲明

<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

　　能够用一个变量来判断是否已经建立过登陆浮窗，代码以下

    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';
    };

　　上面的代码仍然存在以下问题：

　　一、违反单一职责原则的，建立对象和管理单例的逻辑都放在 createLoginLayer对象内部

　　二、若是下次须要建立页面中惟一的iframe，或者script标签，用来跨域请求数据，就必须得如法炮制，把createLoginLayer函数几乎照抄一遍

    var createIframe= (function(){
        var iframe;
        return function(){
            if ( !iframe){
                iframe= document.createElement( 'iframe' );
                iframe.style.display = 'none';
                document.body.appendChild( iframe);
            }
            return iframe;
        }
    })();

通用惰性单例

　　如今须要把不变的部分隔离出来，先不考虑建立一个div和建立一个iframe有多少差别，管理单例的逻辑实际上是彻底能够抽象出来的，这个逻辑始终是同样的：用一个变量来标志是否建立过对象，若是是，则在下次直接返回这个已经建立好的对象

var obj;
if ( !obj ){ obj = xxx; }

　　而后，把如何管理单例的逻辑从原来的代码中抽离出来，这些逻辑被封装在getSingle函数内部，建立对象的方法fn被当成参数动态传入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 createSingleLoginLayer = getSingle( createLoginLayer );
    document.getElementById( 'loginBtn' ).onclick = function(){
        var loginLayer = createSingleLoginLayer();
        loginLayer.style.display = 'block';
    };

　　下面再试试建立惟一的iframe用于动态加载第三方页面

    var createSingleIframe = getSingle(function () {
      var iframe = document.createElement('iframe');
      document.body.appendChild(iframe);
      return iframe;
    });
    document.getElementById('loginBtn').onclick = function () {
      var loginLayer = createSingleIframe();
      loginLayer.src = 'https://www.hao123.com';
    };

　　上面的例子中，建立实例对象的职责和管理单例的职责分别放置在两个方法里，这两个方法能够独立变化而互不影响，当它们链接在一块儿的时候，就完成了建立惟一实例对象的功能

　　这种单例模式的用途远不止建立对象，好比一般渲染完页面中的一个列表以后，接下来要给这个列表绑定click事件，若是是经过ajax动态往列表里追加数据，在使用事件代理的前提下，click事件实际上只须要在第一次渲染列表的时候被绑定一次，但不想判断当前是不是第一次渲染列表，若是借助于jQuery，一般选择给节点绑定one事件

    var bindEvent = function(){
        $( 'div' ).one( 'click', function(){
            alert ( 'click' );
        });
    };
    var render = function(){
        console.log( '开始渲染列表' );
        bindEvent();
    };
    render();
    render();
    render();

　　若是利用getSingle函数，也能达到同样的效果

    var getSingle = function (fn) {
        var result;
        return function () {
            return result || (result = fn.apply(this, arguments));
        }
    };
    var bindEvent = getSingle(function(){
        document.getElementById( 'div1' ).onclick = function(){
            alert ( 'click' );
        }
        return true;
    });
    var render = function(){
        console.log( '开始渲染列表' );
        bindEvent();
    };
    render();
    render();
    render();

　　能够看到，render函数和bindEvent函数都分别执行了3次，但div实际上只被绑定了一个事件