jS設計模式二 單例模式

2021-09-11 12:11:45 字數 1784 閱讀 4792

概念:

單例模式思想在於保證乙個特定類僅有乙個例項,意味著當你第二次使用同乙個類建立信物件時,應得到和第一次建立物件完全相同。

特點: 

可以來劃分命名空間,從而清除全域性變數所帶來的風險。

可以把**組織的更為一體,便於閱讀和維護。

可以被例項化,且例項化一次。

var singleton = function(name);

singleton.prototype.getname = function

() // 獲取例項物件

var getinstance = (function

() return instance;

}})();

// 測試單例模式的例項

var a = getinstance("aa");

var b = getinstance("bb");

console.log(b.getname()); // "aa"

console.log(a === b); // true

複製**

如上**,實現乙個單例模式,無非就是使用乙個變數來標識該類是否被例項化,如果未被例項化的話,那麼我們可以例項化一次,否則的話,直接返回已經被例項化的物件。

日常工作中,我們經常需要實現乙個遮罩層,來防止使用者中斷頁面操作。所謂的遮罩層,就是乙個大小跟視窗一致的半透明div層。我們要求頁面最多只能存在乙個遮罩層,此時運用單例模式就再合適不過了。

以下是**實現~~~

var createmask = (function

() return div;

}})();

document.queryselector("body").onclick = function

()複製**

如上**,雖然可以實現需求,但是不通用。如果業務又需要我們實現單例模式建立彈窗效果,勢必需要copy乙份**,所以我們需要對單例模式進行封裝。

var getinstance = function(fn) 

};複製**

如上**:我們使用乙個引數fn傳遞進去,如果有result這個例項的話,直接返回,否則的話,會去執行fn函式,並將結果儲存到result中。

現在,不管我們需要例項化多少個物件,都使用getinstance來實現。

以下是**示例~~~

var createmask = function

(); // 建立iframe

var createiframe = function

(); // 獲取例項的封裝**

var getinstance = function(fn)

};// 測試建立遮罩層

var createsinglemask = getinstance(createmask);

document.queryselector("body").onclick = function

(); // 測試建立iframe

var createsingleiframe = getinstance(createiframe);

document.queryselector("body").onclick = function

();複製**

單例模式在我們平時的應用中用的比較多的,相當於把我們的**封裝在乙個起來,只是暴露乙個入口,從而避免全部變數的汙染。

JS設計模式(二) 單例模式

我們繼續說小明那個例子 上次說到小明買回了所有的東西,書院的先生一看賬單 4386 雖然覺得這錢花的有點多,但這一次的採購還是要交給小明去做 先生說 小明啊,我給你乙個賬單,你每買一件商品都要在這個賬單上寫上,並讓老闆簽字 class order add good order.getorder fu...

JS設計模式 單例模式

單例模式是乙個用來劃分命名空間並將一批屬性和方法組織在一起的物件,如果它可以被例項化,那麼它只能被例項化一次。單例模式優點 並非所有的物件字面量都是單例,比如模擬資料基本結構 let cat 上面物件字面量結構是建立單例模式的方法之一,但並不是單例模式,單例模式的特點是僅被例項化一次 要實現單例模式...

JS設計模式 單例模式

理解 單例即只能例項乙個物件,無論new多少次,new出來的都是同乙個物件 這裡用了閉包儲存了instance變數,用於判斷是否已經建立了例項,建立了則直接返回,否則new乙個例項返回 單例模式 const grilfriend function let instance null return f...