[TOC] >[success] # js 的單例 ~~~ 1.首先單例模式是只能創建一次實例，如果我們在代碼中寫 var a = {} 你會發現不論我們怎么調用a里面的方法，實際a只被調用了一次，其實 js自帶單例 2.不好的地方需要全局變量命名 ~~~ >[success] # 惰性單例 ~~~ 1.惰性單例是指在需要的時候才創建，和之前的幾個案例寫法上是一樣的，當 使用的時候去new 或者去調用靜態方法創建實例 2.創建彈窗或者那些只要執行一次就可以全局使用的實例都可以用單例 ~~~ * 例如+ ~~~ var Singleton = function (name) { this.name = name } // 靜態屬性（類屬性） Singleton.instance = null Singleton.prototype.getName = function () { console.log(this.name) } // 靜態 Singleton.getInstance = function (name) { if(!this.instance){ this.instance = new Singleton(name) } return this.instance } var a = Singleton.getInstance('wang') var b = Singleton.getInstance('Yi') console.log(a.name) // wang console.log(b.name) // wang console.log(a === b ) // true ~~~ >[info] ## 通用惰性單例 ~~~ 1.舉個書中的例子，登陸的彈窗可能在ifram 中或者非ifram中都需要彈出， 那么我們使用單例模式的時候是否還需要在ifram中適配一個符合在ifram可以 通用的彈窗，這時候就可以使用'通用惰性單例' 2.再舉個例子遮罩層，如果登錄頁的遮罩層和非登錄頁的不同，是否我們需要 寫兩個單例，一個給遮罩層用，一個給登錄頁用 ~~~ >[danger] ##### 通用代碼 ~~~ var singleton = function(fn) { var instance; return function() { return instance || (instance = fn.apply(this, arguments)); } }; ~~~ * 彈窗案例代碼 ~~~ var singleton = function(fn) { var instance; return function() { return instance || (instance = fn.apply(this, arguments)); } }; // 創建遮罩層 var createMask = function(){ // 創建div元素 var mask = document.createElement('div'); // 設置樣式 mask.style.position = 'fixed'; mask.style.top = '0'; mask.style.right = '0'; mask.style.bottom = '0'; mask.style.left = '0'; mask.style.opacity = 'o.75'; mask.style.backgroundColor = '#000'; mask.style.display = 'none'; mask.style.zIndex = '98'; document.body.appendChild(mask); // 單擊隱藏遮罩層 mask.onclick = function(){ this.style.display = 'none'; } return mask; }; // 創建登陸窗口 var createLogin = function() { // 創建div元素 var login = document.createElement('div'); // 設置樣式 login.style.position = 'fixed'; login.style.top = '50%'; login.style.left = '50%'; login.style.zIndex = '100'; login.style.display = 'none'; login.style.padding = '50px 80px'; login.style.backgroundColor = '#fff'; login.style.border = '1px solid #ccc'; login.style.borderRadius = '6px'; login.innerHTML = 'login it'; document.body.appendChild(login); return login; }; document.getElementById('btn').onclick = function() { var oMask = singleton(createMask)(); oMask.style.display = 'block'; var oLogin = singleton(createLogin)(); oLogin.style.display = 'block'; var w = parseInt(oLogin.clientWidth); var h = parseInt(oLogin.clientHeight); } ~~~