Javascript的單例模式

這次帶給大家Javascript的單例模式，Javascript單例模式的注意事項有哪些，以下就是實戰案例，一起來看一下。

單例模式是一個用來分割命名空間並將一批屬性和方法組織在一起的對象，如果它可以被實例化，那麼它只能被實例化一次。

劃分命名空間，減少全域變數

組織程式碼為一體，便於閱讀維護

並非所有的物件字面量都是單例，例如模擬數據

基本結構：

let Cat = {   name: 'Kitty',   age: 3,   run: ()=>{      console.log('run');
   }
}

上面物件字面量結構是建立單例模式的方法之一，但不是單例模式，單例模式的特徵是僅被實例化一次
要實作單一範例模式可以使用變數來標示該類別是否被實例

#基本實作：

class Singleton {    constructor(name){        this.name = name;        this.instance = null;    }    getName(){        return this.name;    }}let getInstance = (()=> {    let instance;    return (name)=> {        if(!instance) {            instance = new Singleton(name);        }        return instance;    }})()let cat1 = getInstance('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'

用instance變數標示實例Singleton，如果沒有實例建立一個，如果有則直接傳回實例，由於僅能被實例化一次，cat2得到的實例和cat1相同

實用
在建立dom元素時為避免重複創建，可以使用單例模式建立

//单例模式let createModal = function() {    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';    document.body.appendChild(content);
}//代理获取实例let getInstance = function(fn) {    let result    return function() {        return result || (result = fn.call(this,arguments));
    }
}let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){    let modal = createSingleModal();
    modal.style.display = 'block';
};

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Javascript的觀察者模式

Javascript的策略模式

以上是Javascript的單例模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！