单例设计模式
定义:保证一个类只有一个实例,并提供一个全局的访问点
应用实例 登录,用闭包作为缓存,判断当前的类是否存在,如果存在,就不会再重新创建,防止了再次创建,优化性能
var createLoginDialog = (function () {
var div;
return function () {
if (!div) {
div = document.createElement('div');
div.innerHTML = '登录悬浮框';
var closeBtn = document.createElement('button');
closeBtn.innerHTML = 'X';
div.appendChild(closeBtn);
closeBtn.onclick = function () {
div.style.display = 'none';
}
document.body.appendChild(div);
} else {
div.style.display = 'block';
}
return div;
}
})();
document.getElementById('loginBtn').onclick = function () {
var loginDiv = createLoginDialog();
}
为了满足单例模式具有单一职原则 ,抽离出一个单例方法
var createLoginDialog = function () {
var div = document.createElement('div');
div.innerHTML = '登录悬浮框';
var closeBtn = document.createElement('button');
closeBtn.innerHTML = 'X';
div.appendChild(closeBtn);
closeBtn.onclick = function () {
div.style.display = 'none';
}
document.body.appendChild(div);
return div;
}
var getSingleton = function (fn) {
var result;
return function () {
return result || (result = fn.apply(this.arguments))
}
}
var createSingletonLogin = getSingleton(createLoginDialog);
document.getElementById('loginBtn').onclick = function () {
var loginDiv = createSingletonLogin();
loginDiv.style.display = 'block';
}