javascript之享元模式

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

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

享元模式

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

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

demo
某商家有 50 種男款內(nèi)衣和 50 種款女款內(nèi)衣, 要展示它們

方案一: 造 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 款內(nèi)衣

  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(性別) 是內(nèi)部對象, underwear(穿著) 是外部對象。

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

1 一開始就通過構(gòu)造函數(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()
    }