JavaScript设计模式——单例模式

单例模式

定义

  一个类仅有一个实例，并提供一个全局访问点。

常用场景

  线程池、全局缓存、登录浮窗

单例模式几种情形

标准单例

  用一个变量来标志是否已经为该类创建过对象，如果创建过，则返回该实例，否则创建新实例。

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 single1 = Singleton.getInstance('staven');
var single2 = Singleton.getInstance('kim');

console.log(single1 === single2); //true

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

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

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

var single1 = Singleton.getInstance('staven');
var single2 = Singleton.getInstance('kim');

console.log(single1 === single2); //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 ProxSingleton = (function () {
    var instance;
    return function (html) {
        if (!instance) {
            instance = new CreateDiv(html);
        }
        return instance;
    }
})();

var single1 = new ProxSingleton('staven');
var single2 = new ProxSingleton('kim');
console.log(single1 === single2); //true

惰性单例

  在需要的时候才创建对象实例。

var getSingle = function (fn) {
    var result;
    return function () {
      return result || (result = fn.apply(this, arguments));
    }
};

var createLoginDiv = function () {
    var div = document.createElement('div');
    div.innerHTML = '我是登录浮窗';
    div.style.display = 'none';
    document.getElementById('box').appendChild(div);
    return div;
};

var loginDiv = getSingle(createLoginDiv);
document.getElementById('loginBtn').onclick = function () {
    loginDiv().style.display = 'block';
};
document.getElementById('exitBtn').onclick = function () {
    loginDiv().style.display = 'none';
};