首頁  >  文章  >  web前端  >  js設計模式:什麼是單例模式? js單例模式的介紹

js設計模式:什麼是單例模式? js單例模式的介紹

不言
不言原創
2018-08-17 16:00:563384瀏覽

這篇文章帶給大家的內容是關於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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn