js設計模式：什麼是單例模式？ js單例模式的介紹

這篇文章帶給大家的內容是關於js設計模式：什麼是單例模式？ js單例模式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是單例模式

定義：1.只有一個實例。 2.可以全域存取

主要解決：一個全域使用的類別頻繁地創建與銷毀。

js單例模式何時使用：當您想要控制實例數目，節省系統資源的時候。

如何解決：判斷系統是否已經有這個單例，如果有則返回，如果沒有則創建。

js單例模式優點： 1、記憶體裡只有一個實例，減少了記憶體的開銷，尤其是頻繁的創建和銷毀實例（例如管理首頁頁面快取）。 2、避免資源的多重佔用（例如寫文件操作）。

單例模式缺點：沒有接口，不能繼承，與單一職責原則衝突，一個類別應該只關心內部邏輯，而不關心外面怎麼樣來實例化。

js單例模式使用場景： 1.全域快取。 2.彈出視窗

實作js單例模式：

const singleton = function(name) {
    this.name = name
    this.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
}

// test
const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
const b = singleton.getInstance('b')
console.log(a === b)

JavaScript 中的單例模式

因為JavaScript 是無類別的語言，而JS 中的全域物件符合單例模式兩個條件。很多時候我們把全域物件當成單例模式來使用

var obj = {}

彈框層的實踐

實現彈框的一種做法是先創建好彈框，然後使之隱藏，這樣子的話會浪費部分不必要的DOM 開銷，我們可以在需要彈框的時候再進行創建，同時結合單例模式實現只有一個實例，從而節省部分DOM 開銷。下列為登錄框部分程式碼：

//弹框层的实践
const createLoginLayer = function() {
    const myDiv = document.createElement('div')
    myDiv.innerHTML = '登入浮框'
    // myDiv.style.display = 'none'
    document.body.appendChild(myDiv);
    return myDiv
}

//使单例模式和创建弹框代码解耦
const getSingle = function(fn) {
  let result = null;
  return function() {
      if(!result){
          result = fn.apply(this, arguments);
      }
    return result;
  }
}

const createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
    createSingleLoginLayer()
}

 相關建議：

JS設計模式之建構器模式詳解

php設計模式，設計模式

php設計模式之單例模式程式碼，php設計模式

以上是js設計模式：什麼是單例模式？ js單例模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！