javascript之享元模式

BlackHole1 發(fā)布于2019-08-26 10:45 / 2399人閱讀

摘要：享元模式享元模式是一種優(yōu)化程序性能的模式本質為減少對象創(chuàng)建的個數(shù)。

享元模式

享元模式是一種優(yōu)化程序性能的模式, 本質為減少對象創(chuàng)建的個數(shù)。

以下情況可以使用享元模式:
有大量相似的對象, 占用了大量內存
對象中大部分狀態(tài)可以抽離為外部狀態(tài)

demo
某商家有 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("male",`第${i}款衣服`)
    maleModel.takephoto()
  }
  for(let i =1;i<51;i++){
    const female = new Model("female",`第${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("male")
  const femaleModel = new Model("female")
  for(let i =1;i<51;i++){
    maleModel.underwear = `第${i}款衣服`
    maleModel.takephoto()
  }
  for(let i =1; i<51;i++){
    femaleModel.underwear = `第${i}款衣服`
    femaleModel.takephoto()
  }

對比發(fā)現(xiàn): 方案一創(chuàng)建了 100 個對象, 方案二只創(chuàng)建了 2 個對象, 在該 demo 中, gender(性別) 是內部對象, underwear(穿著) 是外部對象。

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

1 一開始就通過構造函數(shù)顯示地創(chuàng)建實例, 可用工場模式將其升級成可控生成
2 在實例上手動添加 underwear 不是很優(yōu)雅, 可以在外部多帶帶在寫個 manager 函數(shù)

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

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

    const modelFactory = (function () { // 優(yōu)化第一點
      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) { // 優(yōu)化第二點
          model.underwear = modelObj[i].underwear
        }
      }
    }())

    for (let i = 1; i < 51; i++) {
      const maleModel = modelManager.add("male", i) 
      modelManager.copy(maleModel, i)
      maleModel.takephoto()
    }
    for (let i = 1; i < 51; i++) {
      const femaleModel = modelManager.add("female", i)
      modelManager.copy(femaleModel, i)
       femaleModel.takephoto()
    }

GPU云服務器云服務器 javascript命令模式 javascript嚴格模式 javascript設計模式代碼設計模式工廠模式

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/106734.html

每天一個設計模式之享元模式

摘要：作者按每天一個設計模式旨在初步領會設計模式的精髓，目前采用和兩種語言實現(xiàn)。享元模式提醒我們將一個對象的屬性劃分為內部和外部狀態(tài)。作者按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript和python兩種語言實現(xiàn)。誠然，每種設計模式都有多種實現(xiàn)方式，但此小冊只記錄最直截了當?shù)膶崿F(xiàn)方式 :) 個人技術博客-godbmw.com 歡迎來玩! 每周至少 1 篇原創(chuàng)...

jone5679 2019-08-23 14:11 評論0 收藏0
每天一個設計模式之享元模式

摘要：作者按每天一個設計模式旨在初步領會設計模式的精髓，目前采用和兩種語言實現(xiàn)。享元模式提醒我們將一個對象的屬性劃分為內部和外部狀態(tài)。作者按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript和python兩種語言實現(xiàn)。誠然，每種設計模式都有多種實現(xiàn)方式，但此小冊只記錄最直截了當?shù)膶崿F(xiàn)方式 :) 個人技術博客-godbmw.com 歡迎來玩! 每周至少 1 篇原創(chuàng)...

ormsf 2019-07-30 18:40 評論0 收藏0
設計模式之享元模式

摘要：而享元模式的核心就是運用共享技術來有效支持大量細粒度的對象。享元模式要求將對象的屬性劃分為內部狀態(tài)和外部狀態(tài)，所以在了解享元模式之前我們先要了解兩個概念內部狀態(tài)外部狀態(tài)。一般情況下在這四種情況下應該考慮使用享元模式。享元模式（flyweight）是一種用于性能優(yōu)化的模式，之所以用fly其意為蠅量級。而享元模式的核心就是運用共享技術來有效支持大量細粒度的對象。雖然面向對象可以非常方便的...

Jioby 2019-08-22 10:33 評論0 收藏0
設計模式之享元模式

摘要：類圖相關的設計模式享元模式和代理模式當代理模式消耗性能比較大的時候，就可以用享元模式享元模式和單例模式容器單例，享元模式就是復用對象的思想。源碼中的享元模式源碼地址享元模式參考慕課網(wǎng)設計模式精講設計模式讀書筆記享元模式 0x01.定義與類型定義：提供了減少對象數(shù)量從而改善應用所需的對象結構的方法，系統(tǒng)使用少量對象,而且這些都比較相似，狀態(tài)變化小，可以實現(xiàn)對象的多次復用。運用共享技...

vvpale 2019-08-19 10:19 評論0 收藏0
JavaScript設計模式之結構型設計模式

摘要：享元模式通過分析應用程序的對象，將其解析為內在數(shù)據(jù)和外在數(shù)據(jù)，減少對象數(shù)量，從而提高程序的性能。通過這種方式進行事件綁定，可以減少事件處理程序的數(shù)量，這種方式叫做事件委托，也是運用了享元模式的原理。事件處理程序是公用的內在部分，每個菜單項各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript設計模式之外觀模式概念外觀模式：為一組復雜子系統(tǒng)接口提...

xiaoqibTn 2019-08-21 18:24 評論0 收藏0