一,整體概要javascript
1,筆者淺談html
顧名思義單例模式並不難理解,是產生一個類的惟一實例,在咱們實際開發中也會使用到這種模式,它屬於建立模式的一種,基於JS語言自己的語法特徵,前端
對象直接量「{}」,也能夠做爲單例模式的一種表現形式,以下代碼參考java
1 function Foo(){ 2 this.bar = "Hello Singleton !" ; 3 } ; 4 var Singleton = { 5 instance : null , 6 getInstance : function(){ 7 if(!this.instance){ 8 this.instance = new Foo() ; 9 } 10 return this.instance ; 11 } 12 } ;
就像這樣當咱們每次調用 Singleton.getInstance()時,就會獲得惟一的實例。設計模式
單例模式是javascript最基本,最有用的模式之一,它提供了一種將代碼組織爲一個邏輯單元的手段,這個邏輯單元中的代碼經過單一的變量進行訪問。瀏覽器
單體在javascipt中有許多用處,能夠用來劃分命名空間,以減小全局變量的泛濫。還能夠用在分支技術中用來處理各瀏覽器的差別。然咱們再看幾個例子(*^__^*) 緩存
1 var Singleton = (function(){
var instance = null ; 2 function Foo(){ 3 this.bar = "Hello Singleton !" ; 4 } ; 5 return{ 6 getInstance : function(){ 7 if(!instance){ 8 instance = new Foo() ; 9 } 10 return instance ; 11 } 12 } ; 13 })() ;
這是經過模塊模式實現的。前端框架
1 var Singleton = (function(){
var instance = null ; 2 function Foo(){ 3 this.bar = "Hello Singleton !" ; 4 } ; 5 function createInstance(){ 6 return new Foo() ; 7 } ; 8 return{ 9 getInstance : function(){ 10 if(!instance){ 11 instance = createInstance() ; 12 } 13 return instance ; 14 } 15 } ; 16 })() ;
這是結合工廠模式實現的單例方式。框架
單例模式是設計模式中最簡單的形式之一。這一模式的目的是使得類的一個對象成爲系統中的惟一實例。要實現這一點,能夠從客戶端對其進行實例化開始。所以須要用一種只容許生成對象類的惟一實例的機制,「阻止」全部想要生成對象的訪問。使用工廠方法來限制實例化過程。這個方法應該是靜態方法(類方法),由於讓類的實例去生成另外一個惟一實例毫無心義。函數
二,源碼案例參考
咱們拿Bootstrap前端框架做爲實例進行講解,如下說的是"alert.js v3.3.1"中的源碼,以下所示
這一這句代碼,「if (!data) $this.data('bs.alert', (data = new Alert(this)))」 這就是單例的方式建立組件的實例對象,經過查找緩存在DOM節點的對象判斷是否建立實例。
再給你們幾個例子鞏固單例模式的組織方式以及如何使用
再看一個,這屬於惰性加載。
三,案例引入
今天咱們將結合單例模式與工廠模式作一個小例子,以理解爲主。
(1),建立單例類
1 var Singleton = (function(){ 2 var instance = null ; 3 function createInstance(type){ 4 return factory.create(type) ; 5 } ; 6 return{ 7 getInstance : function(type){ 8 if(!instance){ 9 instance = createInstance(type) ; 10 } 11 return instance ; 12 } 13 } ; 14 })() ;
(2),建立工廠類
1 var factory = (function(){ 2 var instanceVendor = { 3 "foo" : function(){ 4 return new Foo() ; 5 } , 6 "zoo" : function(){ 7 return new Zoo() ; 8 } 9 } ; 10 return { 11 create : function(type){ 12 return instanceVendor[type]() ; 13 } 14 } ; 15 })() ;
(3),建立實體對象類
1 function Foo(){ 2 this.bar = "Hello Singleton !" ; 3 this.getBar = function(){ 4 return this.bar ; 5 } ; 6 } ;
(4),建立客戶端測試類
1 function SingleClient(){ 2 this.run = function(){ 3 Singleton.getInstance("foo").getBar() ; // Hello Singleton ! 4 } ; 5 } ;
四,總結一下