javascript之享元模式

享元模式是一种优化程序性能的模式, 本质为减少对象创建的个数。

以下情况可以使用享元模式:
有大量相似的对象, 占用了大量内存
对象中大部分状态可以抽离为外部状态

某商家有 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 index = 1; index < 51; index++) {
          const model = new Model('male',`第${index}款衣服`)
          model.takePhoto()
        }
         for (let index = 1; index < 51; index++) {
          const model = new Model('female',`第${index}款衣服`)
          model.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 femaleModal = new Model('female')
        for (let index = 1; index < 51; index++) {
          maleModel.underwear = `第${index}款衣服`
          maleModel.takePhoto()
        }
         for (let index = 1; index < 51; index++) {
          femaleModal.underwear = `第${index}款衣服`
          femaleModal.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 modelObj = {}
          return{
            createModel:function(gender){
              if(modelObj[gender]){
                return modelObj[gender]
              }
              return modelObj[gender] = new Model(gender)
            }
          }
      }())
      const modelManage =(function(){
        const manageObj = {}
        return{
          add:function(gender,i){
            manageObj[i]={
              underwear:`第${i}款衣服`
            }
            return modelFactory.createModel(gender)
          },
          copy:function(model,i){  //优化第二点
            model.underwear = manageObj[i].underwear
          }
        }
      }())
      for (let index = 1; index < 10; index++) {
         const maleModel = modelManage.add('male',index)
         modelManage.copy(maleModel,index)
         maleModel.takePhoto()
      }