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

俊刚、

已于 2023-12-29 14:27:42 修改

阅读量1.2k

点赞数 23

分类专栏：前端设计模式文章标签：前端设计模式享元模式

于 2023-12-14 10:21:01 首次发布

本文链接：https://blog.csdn.net/csdn9_14/article/details/134988988

版权

前端设计模式专栏收录该内容

24 篇文章 5 订阅

订阅专栏

✨ 专栏介绍

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

在这里插入图片描述

文章目录

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

享元模式特性

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

应用示例

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');

首先，通过自执行函数创建了一个封闭的工厂函数 imageFactory，这个函数返回一个对象，包含了 createImage 这个方法。
在这个工厂函数内部，创建了一个名为 imageCache 的对象，用于缓存已经创建过的图片对象。
createImage 方法接收一个 URL 参数，然后根据这个 URL 创建一个新的图片对象。如果 imageCache 中已经存在该 URL 的图片对象，就直接返回缓存的版本，否则就创建一个新的图片对象并将其缓存。
最后，通过调用 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');

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

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

优缺点

优点

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

缺点

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

总结

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

😶 写在结尾

前端设计模式专栏
在这里插入图片描述
设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏
在这里插入图片描述
Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏 在这里插入图片描述
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏