首页 > web前端 > js教程 > js设计模式:什么是享元模式?js享元模式的介绍

js设计模式:什么是享元模式?js享元模式的介绍

不言
发布: 2018-08-17 16:39:26
原创
1383 人浏览过

本篇文章给大家带来的内容是关于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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板