js设计模式---单例模式

概念：

     单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次

特点：

1. 可以用来划分命名空间，从而清除全局变量所带来的危险。
2. 利用分支技术来封装浏览器之间的差异。
3. 可以把代码组织的更为一体，便于阅读和维护。

代码实现：

 

// 单体模式

var Singleton = function(name){

    this.name = name;
    this.instance = null;
};
Singleton.prototype.getName = function(){
    return this.name;
}

// 获取实例对象

function getInstance(name) {

    if(!this.instance) {   //一旦被实例化之后就不对其进行在实例化

        this.instance = new Singleton(name);
    }
    return this.instance;
}

// 测试单体模式的实例

var a = getInstance("aa");     --->aa

var b = getInstance("bb");     --->aa

 

应用场景：

     单体模式在我们平时的应用中用的比较多，相当于吧我们的代码封装起来，只是暴露一个入口，从而避免全局的污染。

 

// 实现单体模式弹窗

var createWindow = (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("Id").onclick = function(){
    // 点击后先创建一个div元素
    var win = createWindow();
    win.style.display = "block";
}

 

通用代码封装

 

// 创建divvar

createWindow = function(){

    var div = document.createElement("div");
    div.innerHTML = "我是弹窗内容";
    div.style.display = 'none';
    document.body.appendChild(div);
    return div;
};

// 创建iframevar

createIframe = function(){

    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    return iframe;
};

// 获取实例的封装代码

var getInstance = function(fn) {

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

// 测试创建divvar

createSingleDiv = getInstance(createWindow);

document.getElementById("Id").onclick = function(){
    var win = createSingleDiv();
    win.style.display = "block";
};

// 测试创建iframevar

createSingleIframe = getInstance(createIframe);

document.getElementById("Id").onclick = function(){
    var win = createSingleIframe();
    win.src = "http://cnblogs.com";
};