JS设计模式-单例模式

学习js设计模式的过程中，把分析和学到有用的知识记录下来。

惰性单例模式

假设我们点击登录时弹出一个登录浮窗，很明显这个浮窗在页面里总是唯一的，不可能出现同时出现两个登录窗口的情况。

第一种解决方案是在页面加载完成时便创建好这个div浮窗，这个浮窗一开始肯定是隐藏状态的，当用户点击登录按钮的时候，它才开始显示：

 

<button id="loginBtn">登录<tton>
<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">登录<tton>
<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。虽然我们可以在点击浮窗上的关闭按钮时把这个浮窗从页面中删除，但这样频繁地创建和删除节点明显是不合理不必要的。

我们可以用一个变量来判断是否已经创建过登录浮窗：

 

<button id="loginBtn">登录<tton>
<script>
var createLoginLayer = (function () {
    var div;
    return function () {
        if (!div) {
        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>

 

通用的惰性单例

以上代码还有如下一些问题：

1.仍然违反单一职责原则，创建对象 和管理单例的逻辑都放在createLoginLayer 对象内部

2.如果我们下次需要创建页面中唯一的iframe，或者script标签，用来跨域请求数据，就必须得如法炮制，把createLoginLayer 函数几乎照抄一遍

我们需要把不变的额部分隔离出来，先不考虑创建一个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等。之后再让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 = 'http://baidu.com';
};

 

在这个例子中我们把创建实例对象的职责和管理单例的职责分别放置在两个方法里，这两个方法可以独立变化而互不影响，当他们链连接在一起的时候，就完成了创建唯一实例对象的功能。

这种单例模式的用途远不止创建对象，比如我们通常渲染完页面中的一个列表之后，接下来要给这个列表绑定click事件，如果是通过ajax动态王列表里追加数据，在使用事件代理的前提下，click事件实际上只需要在第一次渲染列表时被绑定一次，但是我们不想去判断当前是否是第一次渲染列表，如果是jq，我们通常选择给节点绑定one事件：

 

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

 

如果利用getSingle函数，也能达到一样的效果：

 

var bindEvent = getSingle(function () {
document.getElementById('loginBtn').onclick = function () {
alert('click');
};
return true;
});
var render = function () {
console.log('开始渲染列表');
bindEvent();
};
render();
render();
render();

 

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

 

在getSingle函数中，实际上也提到了闭包和高阶函数的概念。单例模式是一种简单但非常有用的模式，特别是惰性单例技术，在合适的时候才创建对象，并且只创建唯一的一个。更奇妙的是，创建对象和管理单例的职责被分布在不同的方法中，这两种方法组合起来才具有单例模式的威力。