JavaScript實現(xiàn)單例模式實例分享
傳統(tǒng)單例模式
保證一個類僅有一個實例,并提供一個訪問它的全局訪問點。
實現(xiàn)單例核心思想
無非是用一個變量來標(biāo)志當(dāng)前是否已經(jīng)為某個類創(chuàng)建過對象,如果是,則在下一次獲取該類的實例時,直接返回之前創(chuàng)建的對象,接下來我們用JavaScript來強行實現(xiàn)這個思路,請看代碼:
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本身是沒有類這種概念的,所以我們強行用傳統(tǒng)單例思想來實現(xiàn)是沒有任何意義的,這樣的代碼又臭又長(其實是我自己看著不舒服嘻嘻嘻)。下面我們使用JavaScript的閉包來實現(xiàn)一個單例,請看代碼:
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
可以看到,這樣我們確實用閉包來實現(xiàn)了一個單例,但這個代碼還是高度耦合的,CreateDiv的構(gòu)造函數(shù)實際上負(fù)責(zé)了兩件事情。第一是創(chuàng)建對象和執(zhí)行初始化init方法,第二是保證只有一個對象。這樣的代碼是職責(zé)不明確的,現(xiàn)在我們要把這兩個工作分開,構(gòu)造函數(shù)就負(fù)責(zé)構(gòu)建對象,至于判斷是返回現(xiàn)有對象還是構(gòu)造新的對象并返回,我們交給另外一個函數(shù)去完成,其實也就是為了滿足一個編程思想:單一職責(zé)原則。這樣的代碼才能更好的解耦,請看下面代碼:
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
可以看到,現(xiàn)在我們的構(gòu)造函數(shù)CreateDiv現(xiàn)在只負(fù)責(zé)構(gòu)造對象,至于是返回現(xiàn)有對象還是構(gòu)造新的對象并返回,這件事我們交給了代理類proxySingletonCreateDiv來處理,這樣的代碼看著才舒(zhuang)服(bi)嘛!
最后貼一個高度抽象的單例模式代碼,惰性單例的精髓!
//單例模式抽象,分離創(chuàng)建對象的函數(shù)和判斷對象是否已經(jīng)創(chuàng)建 var getSingle = function (fn) { var result; return function () { return result || ( result = fn.apply(this, arguments) ); } };
形參fn是我們的構(gòu)造函數(shù),我們只要傳入任何自己需要的構(gòu)造函數(shù),就能生成一個新的惰性單例。比如說傳入創(chuàng)建一個女朋友的構(gòu)造函數(shù),并且調(diào)用getSingle(),就能生成一個新的女朋友。如果以后再調(diào)getSingle(),也只會返回剛才創(chuàng)建的那個女朋友。至于新女朋友——不存在的。
單例常用場景
只需要生成一個唯一對象的時候,比如說頁面登錄框,只可能有一個登錄框,那么你就可以用單例的思想去實現(xiàn)他,當(dāng)然你不用單例的思想實現(xiàn)也行,那帶來的結(jié)果可能就是你每次要顯示登陸框的時候都要重新生成一個登陸框并顯示(耗費性能),或者是不小心顯示出了兩個登錄框。
以上就是我們給大家分享的關(guān)于JS實現(xiàn)單例模式的相關(guān)學(xué)習(xí)的心得,感謝大家對腳本之家的支持。
- JavaScript設(shè)計模式---單例模式詳解【四種基本形式】
- JS 設(shè)計模式之:單例模式定義與實現(xiàn)方法淺析
- javascript設(shè)計模式 – 單例模式原理與應(yīng)用實例分析
- 原生javascript單例模式的應(yīng)用實例分析
- 基于JavaScript實現(xiàn)單例模式
- js設(shè)計模式之單例模式原理與用法詳解
- JavaScript設(shè)計模式之單例模式原理與用法實例分析
- JavaScript設(shè)計模式之單例模式簡單實例教程
- NodeJS設(shè)計模式總結(jié)【單例模式,適配器模式,裝飾模式,觀察者模式】
- JavaScript設(shè)計模式之單例模式詳解
- javascript 單例模式詳解及簡單實例
- 解析Javascript單例模式概念與實例
- 怎樣用Javascript實現(xiàn)單例模式
相關(guān)文章
Iframe自適應(yīng)高度絕對好使的代碼 兼容IE,遨游,火狐
Iframe自適應(yīng)高度絕對好使的代碼IE,遨游,火狐都兼容,需要的朋友可以參考下。2011-01-01JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法
這篇文章主要介紹了JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法,涉及javascript針對數(shù)組及隨機數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07效率高的Javscript字符串替換函數(shù)的benchmark
這是經(jīng)常使用的HTML特殊字符替換函數(shù),即將 &、<、>、" 等函數(shù)替換成 &、<、>、"。通常的作法都是連續(xù)使用數(shù)個 replace 函數(shù),而Clear僅使用一個 replace 就完成了替換。2008-08-08微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案(cover-view不兼容)
這篇文章主要介紹了微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案,cover-view不兼容問題,需要的朋友可以參考下2019-11-11