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();
   }

享元设计模式的状态


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


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


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


坚持努力,无惧未来!

相关文章
|
14天前
|
设计模式 存储 缓存
「全网最细 + 实战源码案例」设计模式——享元模式
享元模式(Flyweight Pattern)是一种结构型设计模式,旨在减少大量相似对象的内存消耗。通过分离对象的内部状态(可共享、不变)和外部状态(依赖环境、变化),它有效减少了内存使用。适用于存在大量相似对象且需节省内存的场景。模式优点包括节省内存和提高性能,但会增加系统复杂性。实现时需将对象成员变量拆分为内在和外在状态,并通过工厂类管理享元对象。
147 83
|
1月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
90 33
|
3月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
57 2
|
4月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
49 3
|
5月前
|
设计模式 Java
Java设计模式-享元模式(12)
Java设计模式-享元模式(12)
|
6月前
|
设计模式 存储 Java
【十】设计模式~~~结构型模式~~~享元模式(Java)
文章详细介绍了享元模式(Flyweight Pattern),这是一种对象结构型模式,通过共享技术实现大量细粒度对象的重用,区分内部状态和外部状态来减少内存中对象的数量,提高系统性能。通过围棋棋子的设计案例,展示了享元模式的动机、定义、结构、优点、缺点以及适用场景,并探讨了单纯享元模式和复合享元模式以及与其他模式的联用。
【十】设计模式~~~结构型模式~~~享元模式(Java)
|
6月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
92 1
|
6月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
7月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
112 7
|
7月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
95 6

热门文章

最新文章

  • 1
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    23
  • 2
    Node.js 中实现多任务下载的并发控制策略
    32
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    【JavaScript】深入理解 let、var 和 const
    48
  • 5
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    44
  • 6
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    52
  • 7
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    54
  • 8
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    70
  • 9
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55
  • 10
    JavaWeb JavaScript ③ JS的流程控制和函数
    62