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();