JavaScript设计模式-享元模式(19)

简介: JavaScript设计模式-享元模式(19)

享元设计模式是用于性能优化的模式,这种设计模式的核心在于可以共享技术并支持对大量细分过后的对象进行调整,如果系统中因为创建大量类似的对象而导致内存占用过高,享元设计模式在其中就会起到非常重要的作用,因为它可以使其减少重复创建相同类似的实例对象。在JavaScript中浏览器特别是移动端的浏览器部分所能够使用的内存并不是很多,所以在其中节省内存就变得至关重要

案例


假设有一个服装厂,目前的产品拥有20种男士衣服和20种女士衣服,为了提高衣服产品销量,服装厂决定生产一些塑料模特来穿上他们的衣服拍成广告照片进行宣传。正常情况下需要20个男模特和20个女模特,然后让他们每一个模特都穿上一件内衣来在进行拍照。我们来实现一下


创建一个模特实例,该模特实例接收俩个参数,sex是指男模特还是女模特,name是衣服的编号,拥有一个拍照方法take,调用此方法则会进行拍照

class Model{
       constructor(sex,name){
        this.sex=sex;
           this.name=name;
       }
       take(){
           console.log(`进行拍照,性别:${this.sex},衣服编号:${this.name}`);
       }
   }

使用

for (let index = 0; index <= 20; index++) {
      var male=new Model('male',index);
      var female=new Model('female',index);
      male.take();
      female.take();
   }

如上操作,现在一共有20套男士衣服和20套女士衣服,所以会产生40个对象,如果将来我们生产了100种,1000种衣服,程序可能还没有创建够这么多实例就已经提前崩溃,我们来考虑下如何进行优化这个场景,虽然有40种衣服,但是我们并不需要20个男模特和20个女模特,其实男女模特各自拥有一个就可以了,他们可以分别穿上不同的衣服进行拍照,然后再更换其他衣服在进行拍照,以此往复


我们男女模特各创建一个实例,然后通过更换衣服的编号在进行拍照,最后我们只创建了俩个实例就完成了之前的功能

var male=new Model('male');
 var female=new Model('female');
for (let index = 0; index <= 20; index++) {
    male.name=index;
    female.name=index;
      male.take();
      female.take();
   }

享元设计模式的状态


享元设计模式状态分为内部状态和外部状态,内部状态是可以被存储于对象内部且被共享的,外部状态独立于具体的场景,一般无需改变,他可以根据场景进行变化,不过她是不可被共享的


享元设计模式的状态我们可以使用我们做过的案例来进行描述,性别是内部状态,而服装是外部状态,通过区分这俩种状态,大大减少了系统中的对象数量,一般内部状态有多少种组合,系统中便会存在多少个对象,因为一般只有男女俩种性别,所以我们这里只需要俩个实例对象


享元设计模式在需要到大量重复且相同实例的时候进行使用,能够减少对内存的大量消耗


坚持努力,无惧未来!

相关文章
|
2月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
33 3
|
3月前
|
设计模式 Java
Java设计模式-享元模式(12)
Java设计模式-享元模式(12)
|
4月前
|
设计模式 存储 Java
【十】设计模式~~~结构型模式~~~享元模式(Java)
文章详细介绍了享元模式(Flyweight Pattern),这是一种对象结构型模式,通过共享技术实现大量细粒度对象的重用,区分内部状态和外部状态来减少内存中对象的数量,提高系统性能。通过围棋棋子的设计案例,展示了享元模式的动机、定义、结构、优点、缺点以及适用场景,并探讨了单纯享元模式和复合享元模式以及与其他模式的联用。
【十】设计模式~~~结构型模式~~~享元模式(Java)
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
59 1
|
4月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
5月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
83 7
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
73 6
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
53 6
|
5月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
48 6
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript进阶 - JavaScript设计模式
【7月更文挑战第7天】在软件工程中,设计模式是解决常见问题的标准解决方案。JavaScript中的工厂模式用于对象创建,但过度使用可能导致抽象过度和缺乏灵活性。单例模式确保唯一实例,但应注意避免全局状态和过度使用。观察者模式实现了一对多依赖,需警惕性能影响和循环依赖。通过理解模式的优缺点,能提升代码质量。例如,工厂模式通过`createShape`函数动态创建对象;单例模式用闭包保证唯一实例;观察者模式让主题对象通知多个观察者。设计模式的恰当运用能增强代码可维护性。
84 0