【前端设计模式】之享元模式

这篇具有很好参考价值的文章主要介绍了【前端设计模式】之享元模式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

享元模式是一种结构型设计模式,它通过共享对象来减少内存使用和提高性能。在前端开发中,享元模式可以用于优化大量相似对象的创建和管理,从而提高页面的加载速度和用户体验。

享元模式特性

  1. 共享对象:享元模式通过共享相似对象来减少内存使用。相似对象可以共享一些不变的状态,而将可变的状态作为外部参数传入。
  2. 内部状态和外部状态:享元对象分为内部状态和外部状态。内部状态是不变的,可以被多个对象共享;外部状态是可变的,需要在运行时传入。
  3. 工厂管理:享元模式通常使用工厂来创建和管理共享对象。

应用示例

1. 图片懒加载

在一个页面中可能有多个图片需要加载,但是它们的显示区域可能重叠或者离用户可见区域较远。我们可以使用一个图片懒加载的工厂来创建图片对象,并将图片的URL作为外部参数传入。这样可以避免重复创建相同URL的图片对象,并且只有当图片进入用户可见区域时才进行加载。

 
// 图片懒加载工厂
const imageFactory = (function() {
  const imageCache = {};

  return {
    createImage: function(url) {
      if (imageCache[url]) {
        return imageCache[url];
      } else {
        const img = new Image();
        img.src = url;
        imageCache[url] = img;
        return img;
      }
    }
  };
})();

// 使用图片懒加载工厂创建图片对象
const img1 = imageFactory.createImage('image1.jpg');
const img2 = imageFactory.createImage('image2.jpg');
  1. 首先,通过自执行函数创建了一个封闭的工厂函数 imageFactory,这个函数返回一个对象,包含了 createImage 这个方法。
  2. 在这个工厂函数内部,创建了一个名为 imageCache 的对象,用于缓存已经创建过的图片对象。
  3. createImage 方法接收一个 URL 参数,然后根据这个 URL 创建一个新的图片对象。如果 imageCache 中已经存在该 URL 的图片对象,就直接返回缓存的版本,否则就创建一个新的图片对象并将其缓存。
  4. 最后,通过调用 imageFactory.createImage 方法,分别创建了两个图片对象 img1 和 img2

通过这种方式,当多次请求同一个 URL 的图片时,可以直接从缓存中获取,避免了重复的 HTTP 请求,提高了性能。同时,由于图片对象是缓存在内存中的,即使页面跳转或刷新,这些图片对象也不会被销毁,可以继续用于之后的渲染过程。

2. 表单验证

在一个表单中可能有多个输入框,每个输入框都需要进行验证。我们可以使用一个验证器的工厂来创建验证器对象,并将验证规则作为外部参数传入。这样可以避免重复创建相同规则的验证器对象。

 
// 表单验证器工厂
const validatorFactory = (function() {
  const validatorCache = {};

  return {
    createValidator: function(rule) {
      if (validatorCache[rule]) {
        return validatorCache[rule];
      } else {
        const validator = {
          validate: function(value) {
            // 根据规则进行验证
          }
        };
        validatorCache[rule] = validator;
        return validator;
      }
    }
  };
})();

// 使用表单验证器工厂创建验证器对象
const emailValidator = validatorFactory.createValidator('email');
const phoneValidator = validatorFactory.createValidator('phone');
  1. 首先,通过自执行函数创建了一个封闭的工厂函数 validatorFactory,这个函数返回一个对象,包含了 createValidator 这个方法。
  2. 在这个工厂函数内部,创建了一个名为 validatorCache 的对象,用于缓存已经创建过的验证器对象。
  3. createValidator 方法接收一个规则参数,然后根据这个规则创建一个新的验证器对象。如果 validatorCache 中已经存在该规则的验证器对象,就直接返回缓存的版本,否则就创建一个新的验证器对象并将其缓存。
  4. 在创建验证器对象时,定义了一个 validate 方法用于进行具体的验证操作。具体的验证逻辑需要根据具体的规则来实现。
  5. 最后,通过调用 validatorFactory.createValidator 方法,分别创建了两个验证器对象 emailValidator 和 phoneValidator

通过这种方式,当需要使用相同的规则进行验证时,可以直接从缓存中获取验证器对象,避免了重复的创建过程,提高了性能。

优缺点

优点
  1. 减少内存使用:享元模式通过共享相似对象来减少内存使用,特别适用于大量相似对象的场景。
  2. 提高性能:由于减少了对象的创建和销毁,享元模式可以提高系统的性能和响应速度。
  3. 简化代码逻辑:享元模式将对象的内部状态和外部状态分离,使得代码更加清晰和易于维护。
缺点
  1. 增加复杂性:享元模式引入了共享对象和工厂管理,增加了系统的复杂性。
  2. 共享状态的安全性:如果多个对象共享了相同的内部状态,那么一个对象对内部状态的修改可能会影响其他对象。

总结

享元模式是一种优化大量相似对象创建和管理的设计模式,在前端开发中可以用于优化图片懒加载、表单验证等场景。它通过共享相似对象来减少内存使用和提高性能,同时也简化了代码逻辑。然而,它也增加了系统的复杂性,并且需要注意共享状态的安全性。在实际应用中,我们需要根据具体场景权衡使用享元模式带来的优缺点。文章来源地址https://www.toymoban.com/news/detail-720188.html

到了这里,关于【前端设计模式】之享元模式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 设计模式之享元模式【结构型模式】

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 学习的最大理由是想摆脱平庸,早一天就多一份人生的精彩;迟一天就多一天平庸的困扰。各位小伙伴,如果您: 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持,想组团高效学习… 想写博

    2024年01月25日
    浏览(43)
  • 设计模式(十二):结构型之享元模式

    设计模式系列文章 设计模式(一):创建型之单例模式 设计模式(二、三):创建型之工厂方法和抽象工厂模式 设计模式(四):创建型之原型模式 设计模式(五):创建型之建造者模式 设计模式(六):结构型之代理模式 设计模式(七):结构型之适配器模式 设计模式(八):结构型之装

    2024年02月08日
    浏览(55)
  • 【结构型设计模式】C#设计模式之享元模式

    享元模式(Flyweight Pattern)是一种结构型设计模式,旨在通过尽可能共享对象来减少内存使用和提高性能。它将对象分为两种类型:内部状态(Intrinsic State)和外部状态(Extrinsic State)。内部状态是可以共享的,而外部状态是独立于享元对象的,并且在使用时需要注入。 使用

    2024年02月13日
    浏览(39)
  • 学习设计模式之享元模式,但是宝可梦

    作者在准备秋招中,学习设计模式,做点小笔记,用宝可梦为场景举例,有错误欢迎指出。 代码同步更新到 github ,要是点个Star您就是我的神 享元模式很好理解,它主要是为了减少创建对象的数量,属于结构型设计模式 目的:减少创建对象的次数 方法:复用对象 何时使用:

    2024年02月11日
    浏览(35)
  • 【Java 设计模式】结构型之享元模式

    享元模式(Flyweight Pattern)是一种结构型设计模式,它旨在减少对象的数量以节省内存和提高性能。享元模式通过共享大量相似对象的状态,使得这些对象可以共享,而不需要在每个对象中都存储相同的数据。在本文中,我们将深入研究Java中享元模式的定义、结构、使用场景

    2024年01月22日
    浏览(52)
  • 设计模式-享元模式

    享元模式(Flyweight Pattern)是一种结构型设计模式,主要用于减少创建大量相似对象对内存资源的消耗,通过共享这些对象来提高程序性能和系统资源利用率。在实际应用场景中string就是使用了享元模式,string a = “123”; string b = “123”; 我们假设有一个场景是需要创建大量的

    2024年01月24日
    浏览(41)
  • 设计模式——享元模式

    享元模式(Flyweight Pattern)是池技术的重要实现方式。 使用共享对象可以有效地支持大量的细粒度对象。 优点 可以大大减少应用程序创建对象的数量,降低程序内存占用。 缺点 提高了系统的复杂度,需要分离出享元对象的外部状态(key)和内部状态(对象属性),并且外部

    2024年02月16日
    浏览(38)
  • 设计模式:享元模式

    首先我们需要简单了解一下什么是享元模式。 享元模式(Flyweight Pattern) :主要用于减少创建对象的数量,以减少内存占用和提高性能。享元模式的重点就在这个享字,通过一些共享技术来减少对象的创建,实际上Java中String值的存储,Volley中的 ByteArrayPool 也使用到了享元模式,

    2024年02月08日
    浏览(43)
  • 设计模式(22)享元模式

    一、介绍: 1、定义:享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能。这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式。 2、组成结构: (1)Flyweight(抽象享元类):通常是一个接口或

    2024年02月07日
    浏览(40)
  • 【23种设计模式】享元模式【⭐】

    个人主页 :金鳞踏雨 个人简介 :大家好,我是 金鳞 ,一个初出茅庐的Java小白 目前状况 :22届普通本科毕业生,几经波折了,现在任职于一家国内大型知名日化公司,从事Java开发工作 我的博客 :这里是CSDN,是我学习技术,总结知识的地方。希望和各位大佬交流,共同进

    2024年02月09日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包