在 JavaScript 開發(fā)中谦屑,單例模式的用途非常廣泛吧慢。比如涛漂,當(dāng)我們單擊登錄按鈕的時(shí)候,頁(yè)面中會(huì)出現(xiàn)一個(gè)登錄浮窗检诗,而這個(gè)登錄浮窗是唯一的匈仗,無(wú)論單擊多少次登錄按鈕,這個(gè)浮窗都只會(huì)被創(chuàng)建一次逢慌,那么這個(gè)登錄浮窗就適合用單例模式來(lái)創(chuàng)建悠轩。
定義
單例模式的定義是:保證一個(gè)類僅有一個(gè)實(shí)例,并提供一個(gè)訪問它的全局訪問點(diǎn)攻泼。
實(shí)現(xiàn)方法
經(jīng)典Singleton模式的實(shí)現(xiàn)方式是火架,如果實(shí)例不存在,通過一個(gè)方法創(chuàng)建一個(gè)實(shí)例忙菠。如果已經(jīng)存在何鸡,則返回實(shí)例的引用。
Singleton與靜態(tài)類(對(duì)象)不同的是牛欢,它可以被延遲生成骡男,只有在需要的時(shí)候才會(huì)生成實(shí)例。
在JavaScript里傍睹,實(shí)現(xiàn)單例的方式有很多種隔盛,其中最簡(jiǎn)單的一個(gè)方式是使用對(duì)象字面量的方法,其字面量里可以包含大量的屬性和方法:
var singleton = (function() {
var instance;
function init() {
// define private methods and properties
// do something
return {
// define public methods and properties
publicMethod: function() {
console.log('hello singleton!')
},
publicProperty: 'test'
};
}
return {
getInstance: function() {
if (!instance) {
instance = init()
}
return instance
}
}
})();
singleton.getInstance().publicMethod(); // hello singleton!
console.log(singleton.getInstance().publicProperty); // test
其它實(shí)現(xiàn)方法
方法1:
function Universe() {
// 判斷是否存在實(shí)例
if (typeof Universe.instance === 'object') {
return Universe.instance;
}
// 其它內(nèi)容
this.start_time = 0;
this.bang = "Big";
// 緩存
Universe.instance = this;
// 隱式返回this
}
// 測(cè)試
var uni = new Universe();
var uni2 = new Universe();
console.log(uni === uni2); // true
方法2:
function Universe() {
// 緩存的實(shí)例
var instance = this;
// 其它內(nèi)容
this.start_time = 0;
this.bang = "Big";
// 重寫構(gòu)造函數(shù)
Universe = function () {
return instance;
};
}
// 測(cè)試
var uni = new Universe();
var uni2 = new Universe();
uni.bang = "123";
console.log(uni === uni2); // true
console.log(uni2.bang); // 123
方法3:
function Universe() {
// 緩存實(shí)例
var instance;
// 重新構(gòu)造函數(shù)
Universe = function Universe() {
return instance;
};
// 后期處理原型屬性
Universe.prototype = this;
// 實(shí)例
instance = new Universe();
// 重設(shè)構(gòu)造函數(shù)指針
instance.constructor = Universe;
// 其它功能
instance.start_time = 0;
instance.bang = "Big";
return instance;
}
// 測(cè)試
var uni = new Universe();
var uni2 = new Universe();
console.log(uni === uni2); // true
// 添加原型屬性
Universe.prototype.nothing = true;
var uni = new Universe();
Universe.prototype.everything = true;
var uni2 = new Universe();
console.log(uni.nothing); // true
console.log(uni2.nothing); // true
console.log(uni.everything); // true
console.log(uni2.everything); // true
console.log(uni.constructor === Universe); // true
方式4:
var Universe;
(function () {
var instance;
Universe = function Universe() {
if (instance) {
return instance;
}
instance = this;
// 其它內(nèi)容
this.start_time = 0;
this.bang = "Big";
};
} ());
//測(cè)試代碼
var a = new Universe();
var b = new Universe();
alert(a === b); // true
a.bang = "123";
alert(b.bang); // 123
參考及引用資料:
https://github.com/shichuan/javascript-patterns/blob/master/design-patterns/singleton.html