关于前端:设计模式

1. 单例模式

1.1 定义：
保障一个类仅有一个实例，并提供一个拜访它的全局拜访点。

1.2 应用场景：

• 只须要一个的对象，比方线程池、全局缓存、浏览器中的 window 对象等
• 登录浮窗只会被创立一次

1.3 代码实现：

// 单例类
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){instance = new CreateDiv(html);
    }

    return instance;
})();

// 应用实例
var a = new ProxySingletonCreateDiv('sven1');
var b = new ProxySingletonCreateDiv('sven2');
console.log(a === b);

1.4 惰性单例：

// 获取实例的办法
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('loginBtn').onclick = function(){var loginLayer = createSingleLoginLayer();
    loginLayer.style.display = 'block';
}