Javascript单例模式

单例模式的思想在于保证一个特定类仅有一个实例，意味着当第二次使用同一个类创建新对象的时候，应该得到与第一次所创建对象完全相同的对象

例1.在闭包中实现–重写构造函数

function Universe(){    //缓存实例    var instance;     //重写该构造函数    Universe = function Universe(){        return instance;    }    //保留原型属性    Universe.prototype = this;    //实例    instance = new Universe();    //重置构造函数指针    instance.constructor = Universe;    //所有功能    instance.start_time = 0;    instance.bang = "Big";    return instance;}

例2.将构造函数和实例包装在即时函数中

var Universe;(function(){    var instance;    Universe = function Universe(){        if(instance){            return instance;        }        instance = this;        //所有功能         this.start_time = 0;        this.bang = "Big";    };}());

例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){        if(!instance){            instance = new CreateDiv(html);        }        return instance;    }})();var a = new ProxySingletonCreateDiv('sven1');var b = new ProxySingletonCreateDiv('sven2');alert(a == b);//true

---

例4 实践–惰性单例 -使用的时候去创建（类似登录框功能）

//惰性单例var createLoginLayer = (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('loginBtn').onclick = function(){    var loginLayer = createLoginLayer();    loginLayer.style.display = 'block';}

惰性单例优化-单一职责原则

//惰性单例优化-将职责区分开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';}

例5 实践–ajax动态加载数据

//应用于-ajax动态加载数据时，已绑定过的事件不再重复绑定，类似于Jquery的one函数功能var getSingle = function(fn){    var result;    return function(){        return result || (result = fn.apply(this,arguments));    }}var bindEvent = getSingle(function(){    document.getElementById('div').onclick = function(){        alert('click');    }    return true;});var render = function(){    console.log('开始渲染列表');    bindEvent();};render();render();render();