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

js設計模式:什麼是享元模式? js享元模式的介紹

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

本篇文章帶給大家的內容是關於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 中,還可以進一步改善:

  1. #一開始就透過建構函式顯示地建立實例,可用工場模式將其升級成可控產生

  2. 在實例上手動新增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設計模式:什麼是範本方法模式? js模板方法模式的介紹

以上是js設計模式:什麼是享元模式? js享元模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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