首頁 >web前端 >js教程 >js設計模式：什麼是享元模式？ js享元模式的介紹

js設計模式：什麼是享元模式？ js享元模式的介紹

不言原創: 2018-08-17 16:39:261377瀏覽

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

什麼是享元模式？

定義：享元模式是一種最佳化程式效能的模式，本質為減少物件所建立的數量。

主要解決：在有大量物件時，有可能會造成記憶體溢出，我們把其中共同的部分抽像出來，如果有相同的業務請求，直接返回在記憶體中已有的對象，避免重新創建。

何時使用： 1、系統中有大量物件。 2、這些物件消耗大量記憶體。 3.這些物件的狀態大部分可以外部化。 4.這些物件可以依照內蘊狀態分為許多群組，當把外蘊物件從物件中剔除時，每一組物件都可以用一個物件來取代。 5.系統不依賴這些物件身份，這些物件是不可分辨的。

如何解決：用唯一識別碼判斷，如果在記憶體中有，則傳回這個唯一識別碼所標識的物件。

關鍵程式碼：用 hash物件儲存這些物件。

js享元模式應用程式實例： 1、例如string，如果有則返回，如果沒有則建立一個字串保存在字串快取池裡面。 2、資料庫的資料池。

js享元模式優點：大幅減少物件的創建，降低系統的內存，使效率提高。

js享元模式缺點：提高了系統的複雜度，需要分離出外部狀態和內部狀態，而且外部狀態具有固有化的性質，不應該隨著內部狀態的變化而變化，否則會造成系統的混亂。

js享元模式使用場景： 1、系統有大量相似物件。 2、需要緩衝池的場景。

js享元模式實例：

某商家有50 種男款內衣和50 種款女款內衣，要展示它們

方案一：造50 個塑料男模與50 個塑膠女模，讓她們穿上展示，代碼如下：

const Model = function(gender, underwear) {
  this.gender = gender
  this.underwear = underwear
}

Model.prototype.takephoto = function() {
  console.log(`${this.gender}穿着${this.underwear}`)
}

for (let i = 1; i < 51; i++) {
  const maleModel = new Model(&#39;male&#39;, `第${i}款衣服`)
  maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
  const female = new Model(&#39;female&#39;, `第${i}款衣服`)
  female.takephoto()
}

方案二：造1 個塑膠男模特兒1 個塑膠女模特，分別試穿50 款內衣

const Model = function(gender) {
    this.gender = gender
}

Model.prototype.takephoto = function() {
    console.log(`${this.gender}穿着${this.underwear}`)
}

const maleModel = new Model(&#39;male&#39;)
const femaleModel = new Model(&#39;female&#39;)

for (let i = 1; i < 51; i++) {
    maleModel.underwear = `第${i}款衣服`
    maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
    femaleModel.underwear = `第${i}款衣服`
    femaleModel.takephoto()
}

對比發現：方案一創造了100 個對象，方案二隻創建了2 個對象，在該demo 中，gender(性別) 是內部對象，underwear(穿著) 是外部對象。

當然在方案二的demo 中，還可以進一步改善：

#一開始就透過建構函式顯示地建立實例，可用工場模式將其升級成可控產生
在實例上手動新增underwear 不是很優雅，可以在外部單獨在寫個manager 函數

const Model = function(gender) {
  this.gender = gender
}

Model.prototype.takephoto = function() {
  console.log(`${this.gender}穿着${this.underwear}`)
}

const modelFactory = (function() { // 优化第一点
  const modelGender = {}
  return {
    createModel: function(gender) {
      if (modelGender[gender]) {
        return modelGender[gender]
      }
      return modelGender[gender] = new Model(gender)
    }
  }
}())

const modelManager = (function() {
  const modelObj = {}
  return {
    add: function(gender, i) {
      modelObj[i] = {
        underwear: `第${i}款衣服`
      }
      return modelFactory.createModel(gender)
    },
    copy: function(model, i) { // 优化第二点
      model.underwear = modelObj[i].underwear
    }
  }
}())

for (let i = 1; i < 51; i++) {
  const maleModel = modelManager.add(&#39;male&#39;, i)
  modelManager.copy(maleModel, i)
  maleModel.takephoto()
}

for (let i = 1; i < 51; i++) {
  const femaleModel = modelManager.add(&#39;female&#39;, i)
  modelManager.copy(femaleModel, i)
  femaleModel.takephoto()
}

js設計模式：什麼是享元模式？ js享元模式的介紹

什麼是享元模式？

js享元模式實例：

相關文章