【设计模式】之享元模式

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

✨ 专栏介绍

设计模式是在软件开发中经过验证的解决问题的方法。它们是从经验中总结出来的,可以帮助我们更好地组织和管理代码,提高代码的可维护性、可扩展性和可重用性。无论是前端还是后端开发,设计模式都扮演着重要的角色。在本专栏中,我们将探索一些常见的前端设计模式,并学习如何将它们应用于实际项目中。通过掌握这些设计模式,我们可以编写更优雅、可靠且易于维护的前端代码。

本文主要讲解结构型模式中的享元模式


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

享元模式特性

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

应用示例

1. 图片懒加载

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

// 图片懒加载工厂constimageFactory= (function() {
constimageCache= {};
return {
createImage: function(url) {
if (imageCache[url]) {
returnimageCache[url];
      } else {
constimg=newImage();
img.src=url;
imageCache[url] =img;
returnimg;
      }
    }
  };
})();
// 使用图片懒加载工厂创建图片对象constimg1=imageFactory.createImage('image1.jpg');
constimg2=imageFactory.createImage('image2.jpg');
  1. 首先,通过自执行函数创建了一个封闭的工厂函数 imageFactory,这个函数返回一个对象,包含了 createImage 这个方法。
  2. 在这个工厂函数内部,创建了一个名为 imageCache 的对象,用于缓存已经创建过的图片对象。
  3. createImage 方法接收一个 URL 参数,然后根据这个 URL 创建一个新的图片对象。如果 imageCache 中已经存在该 URL 的图片对象,就直接返回缓存的版本,否则就创建一个新的图片对象并将其缓存。
  4. 最后,通过调用 imageFactory.createImage 方法,分别创建了两个图片对象 img1img2

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

2. 表单验证

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

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

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

优缺点

优点

  1. 减少内存使用:享元模式通过共享相似对象来减少内存使用,特别适用于大量相似对象的场景。
  2. 提高性能:由于减少了对象的创建和销毁,享元模式可以提高系统的性能和响应速度。
  3. 简化代码逻辑:享元模式将对象的内部状态和外部状态分离,使得代码更加清晰和易于维护。

缺点

  1. 增加复杂性:享元模式引入了共享对象和工厂管理,增加了系统的复杂性。
  2. 共享状态的安全性:如果多个对象共享了相同的内部状态,那么一个对象对内部状态的修改可能会影响其他对象。

总结

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


目录
相关文章
|
7月前
|
设计模式 存储 Java
23种设计模式,享元模式的概念优缺点以及JAVA代码举例
【4月更文挑战第6天】享元模式(Flyweight Pattern)是一种结构型设计模式,旨在通过共享技术有效地支持大量细粒度对象的重用。这个模式在处理大量对象时非常有用,特别是当这些对象中的许多实例实际上可以共享相同的状态时,从而可以减少内存占用,提高程序效率
102 4
|
7月前
|
设计模式
二十三种设计模式全面解析-组合模式与享元模式的结合应用:实现对象的共享和高效管理
二十三种设计模式全面解析-组合模式与享元模式的结合应用:实现对象的共享和高效管理
|
3月前
|
设计模式 Java
Java设计模式-享元模式(12)
Java设计模式-享元模式(12)
|
4月前
|
设计模式 存储 Java
【十】设计模式~~~结构型模式~~~享元模式(Java)
文章详细介绍了享元模式(Flyweight Pattern),这是一种对象结构型模式,通过共享技术实现大量细粒度对象的重用,区分内部状态和外部状态来减少内存中对象的数量,提高系统性能。通过围棋棋子的设计案例,展示了享元模式的动机、定义、结构、优点、缺点以及适用场景,并探讨了单纯享元模式和复合享元模式以及与其他模式的联用。
【十】设计模式~~~结构型模式~~~享元模式(Java)
|
5月前
|
设计模式 存储 JavaScript
js设计模式【详解】—— 享元模式
js设计模式【详解】—— 享元模式
68 6
|
6月前
|
设计模式 缓存 Java
Java设计模式:享元模式实现高效对象共享与内存优化(十一)
Java设计模式:享元模式实现高效对象共享与内存优化(十一)
|
6月前
|
设计模式 存储 Java
Java设计模式之享元模式详解
Java设计模式之享元模式详解
|
6月前
|
设计模式
享元模式-大话设计模式
享元模式-大话设计模式
|
7月前
|
设计模式 Go
[设计模式 Go实现] 结构型~享元模式
[设计模式 Go实现] 结构型~享元模式
|
7月前
|
设计模式 存储 Java
小谈设计模式(27)—享元模式
小谈设计模式(27)—享元模式

热门文章

最新文章

  • 1
    设计模式转型:从传统同步到Python协程异步编程的实践与思考
    58
  • 2
    C++一分钟之-设计模式:工厂模式与抽象工厂
    47
  • 3
    《手把手教你》系列基础篇(九十四)-java+ selenium自动化测试-框架设计基础-POM设计模式实现-下篇(详解教程)
    54
  • 4
    C++一分钟之-C++中的设计模式:单例模式
    65
  • 5
    《手把手教你》系列基础篇(九十三)-java+ selenium自动化测试-框架设计基础-POM设计模式实现-上篇(详解教程)
    43
  • 6
    《手把手教你》系列基础篇(九十二)-java+ selenium自动化测试-框架设计基础-POM设计模式简介(详解教程)
    70
  • 7
    Java面试题:结合设计模式与并发工具包实现高效缓存;多线程与内存管理优化实践;并发框架与设计模式在复杂系统中的应用
    62
  • 8
    Java面试题:设计模式在并发编程中的创新应用,Java内存管理与多线程工具类的综合应用,Java并发工具包与并发框架的创新应用
    43
  • 9
    Java面试题:如何使用设计模式优化多线程环境下的资源管理?Java内存模型与并发工具类的协同工作,描述ForkJoinPool的工作机制,并解释其在并行计算中的优势。如何根据任务特性调整线程池参数
    52
  • 10
    Java面试题:请列举三种常用的设计模式,并分别给出在Java中的应用场景?请分析Java内存管理中的主要问题,并提出相应的优化策略?请简述Java多线程编程中的常见问题,并给出解决方案
    121