乐趣区

JS设计模式单例模式

单例模式

单例模式,也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在。
———来自维基百科

一个很典型的应用是在点击登录按钮,弹出登录浮窗,不论点击多少次登录按钮,页面始终只会弹出一个登录浮窗。

实现单例模式

思路很简单,用一个变量记录是否已经为某个类创建过对象,如果没有则返回新建的对象,反之则返回之前创建的对象。

在构造器里记录实例:

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('sean1');
var b = Singleton.getInstance('sean2');
console.log(a === b); // true

使用闭包记录实例:

var Singleton = function(name) {this.name = name;};

Singleton.prototype.getName = function() {console.log(this.name);
};

Singleton.getInstance = (function() {
  var instance = null;
  return function(name) {if (!instance) {instance = new Singleton(name);
    }
    return instance;
  };
})();
var a = Singleton.getInstance('sean1');
var b = Singleton.getInstance('sean2');
console.log(a === b); // true

以上方法相对简单,但是 Singleton 类的使用者必须知道这是一个单例类,需要调用 getInstance() 函数(而不是 new 的方式)来获取对象,这也就是增加了“不透明性”。

透明的单例模式

利用一个 IIFE 形成一个闭包,在里边通过变量 instance 来记录实例,并返回构造函数。

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('sean1');
var b = new CreateDiv('sean2');
console.log(a === b); // true

上面完成了一个透明的单例类的编写,但还是有缺点,增加了一些程序的复杂度,且阅读性差。还有重要的一点是违反了“单一职责原则”,接下来再改进一下。

用代理实现单例模式

其实就是将实际的业务代码与负责管理单例的代码分离,管理单例的类就是代理类。

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 a1 = new ProxySingletonCreateDiv('sean1');
var b1 = new ProxySingletonCreateDiv('sean2');
console.log(a1 === b1); // true

// 如果想要创建多个 div 就直接调用 CreateDiv 咯

var a2 = new CreateDiv('sean1');
var b2 = new CreateDiv('sean2');
console.log(a2 === b2); // false

JavaScript 中的单例模式

前面提到的几种实现,更多的是接近传统面向对象语言中的实现,但 JavaScript 是一门无类(class-free)语言,我们只要记住单例模式但核心是 确保只有一个实例,并提供全局访问

全局变量不是单例模式,但它却满足单例的条件,所以我们经常会把全局变量当成单例来使用:var a = {};。但是我们都知道全局变量很容易造成命名空间污染、容易被不小心覆盖等问题。我们有必要尽量减少全局变量的使用,即使要,也要将污染降到最低:

  • 使用命名空间

    var namespace1 = {a: function() {return 1;},
      b: function() {return 2;}
    };
    
    // 或者动态创建命名空间:var MyApp = {};
    MyApp.namespace = function(name) {var parts = name.split('.');
      var current = MyApp;
      for (var item of parts) {if (!current[item]) {current[item] = {};}
        current = current[item];
      }
    };
    MyApp.namespace('event');
    MyApp.namespace('dom.style');
    
    console.dir(MyApp);
  • 使用闭包封装私有变量

    var user = (function() {
      var __name = 'sean',
        __age = 19;
      return {getUserInfo: function() {return __name + '-' + __age;}
      };
    })();

惰性单例

所谓惰性,就是只有在需要的时候才会去做。前面提到的也有满足惰性的实现,不过是基于“类”的。下面来看一下文章开头提到的那个典型的应用实现:

<html>
  <body>
    <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>
  </body>
</html>

上面的代码完成了惰性单例的实现,但仍然违反了单一职责原则,如果我们下次不是创建一个登录浮窗而是别的元素呢,请往后看通用的惰性单例。

通用的惰性单例

// 定义一个管理单例的函数:var getSingle = function(fn) {
  var result;
  return function() {return result || (result = fn.apply(this, arguments))
  }
}

// 定义创建浮窗的函数: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('btn').onclick = function() {var loginLayer = createSingleLoginLayer();
  loginLayer.style.display = 'block';
};

参考

曾探. JavaScript 设计模式与开发实践 (图灵原创) (Chinese Edition)

退出移动版