JavaScript實現單例模式實例分享

來源：懂視網責編：小采時間：2020-11-27 22:23:08

JavaScript實現單例模式實例分享

JavaScript實現單例模式實例分享:傳統單例模式保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。實現單例核心思想無非是用一個變量來標志當前是否已經為某個類創建過對象，如果是，則在下一次獲取該類的實例時，直接返回之前創建的對象，接下來我們用JavaScript來強行實現這個思路

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript實現單例模式實例分享:傳統單例模式保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。實現單例核心思想無非是用一個變量來標志當前是否已經為某個類創建過對象，如果是，則在下一次獲取該類的實例時，直接返回之前創建的對象，接下來我們用JavaScript來強行實現這個思路

傳統單例模式

保證一個類僅有一個實例，并提供一個訪問它的全局訪問點。

實現單例核心思想

無非是用一個變量來標志當前是否已經為某個類創建過對象，如果是，則在下一次獲取該類的實例時，直接返回之前創建的對象，接下來我們用JavaScript來強行實現這個思路，請看代碼：

var Singleton = function( name ){
 this.name = name;
};
Singleton.prototype.getName = function(){　　 alert ( this.name );
};
Singleton.getInstance = (function(){ 　　var instance = null;
　　return function( name ){
　　　　　　　　　　if ( !instance ){
　　　　　　　　　　　　instance = new Singleton( name );
　　　　　　　　　　}
　　　　　　　　return instance;　　　　　　 }
})();

我們通過Singleton.getInstance來獲取Singleton類的唯一對象，這樣確實是沒問題的，但是js本身是沒有類這種概念的，所以我們強行用傳統單例思想來實現是沒有任何意義的，這樣的代碼又臭又長（其實是我自己看著不舒服嘻嘻嘻）。下面我們使用JavaScript的閉包來實現一個單例，請看代碼：

var CreateDiv = (function(){ 　　　　　　var instance;
　　　　　　var CreateDiv = function( html ){ 　　　　　　　　　　if ( instance ){
　　　　　　　　　　　　return instance; 　　　　　　　　　　}
　　　　　　　　　　this.html = html; this.init();
　　　　　　　　　　return instance = this;
};
CreateDiv.prototype.init = function(){
var div = document.createElement( 'div' );
div.innerHTML = this.html; 
document.body.appendChild( div );
　　　　　　};
　　　　　　return CreateDiv; })();
var a = new CreateDiv( 'sven1' ); var b = new CreateDiv( 'sven2' );
alert ( a === b ); // true

可以看到，這樣我們確實用閉包來實現了一個單例，但這個代碼還是高度耦合的，CreateDiv的構造函數實際上負責了兩件事情。第一是創建對象和執行初始化init方法，第二是保證只有一個對象。這樣的代碼是職責不明確的，現在我們要把這兩個工作分開，構造函數就負責構建對象，至于判斷是返回現有對象還是構造新的對象并返回，我們交給另外一個函數去完成，其實也就是為了滿足一個編程思想：單一職責原則。這樣的代碼才能更好的解耦，請看下面代碼：

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

可以看到，現在我們的構造函數CreateDiv現在只負責構造對象，至于是返回現有對象還是構造新的對象并返回，這件事我們交給了代理類proxySingletonCreateDiv來處理，這樣的代碼看著才舒（zhuang）服（bi）嘛！

最后貼一個高度抽象的單例模式代碼，惰性單例的精髓！

//單例模式抽象，分離創建對象的函數和判斷對象是否已經創建
 var getSingle = function (fn) {
 var result;
 return function () {
 return result || ( result = fn.apply(this, arguments) );
 }
 };

形參fn是我們的構造函數，我們只要傳入任何自己需要的構造函數，就能生成一個新的惰性單例。比如說傳入創建一個女朋友的構造函數，并且調用getSingle(),就能生成一個新的女朋友。如果以后再調getSingle(),也只會返回剛才創建的那個女朋友。至于新女朋友——不存在的。

單例常用場景

只需要生成一個唯一對象的時候，比如說頁面登錄框，只可能有一個登錄框，那么你就可以用單例的思想去實現他，當然你不用單例的思想實現也行，那帶來的結果可能就是你每次要顯示登陸框的時候都要重新生成一個登陸框并顯示（耗費性能），或者是不小心顯示出了兩個登錄框。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com