前端设计模式

梦飞君
163 阅读5分钟

前端设计模式

一。定义

设计模式是软件开发人员对开发过程中出现的一系列问题总结的解决方案。

二。为什么需要设计模式

1.提高代码重用性，能够快速构建出相似功能的代码。

2.将代码使用单一原则进行分模块设计，提高代码的可维护性、可扩展性。

3.提高程序的可读性和健壮性，让开发者能够更好地理解和应对各种场景下的问题。

三。设计模式的基本原则

SOLID 五大基本原则：

单一功能原则：就是一个类/对象/函数。应该只有一个引起它变化的原因。就是一个程序只完成一件事情。这是为了高内聚低耦合的实现。

开放-封闭原则：给代码留可扩展的空间，对原有代码进行封闭。即新功能需求进行扩展，不改变已有的代码。

里式替换原则：子类可以替换父类的任何操作。而不会导致异常。

接口隔离原：将大的接口拆分成小的特定接口，以避免不必要的依赖

依赖反转原则：高层模块不应该依赖于低层模块，二者都应该依赖于抽象。抽象不应该依赖于具体实现细节，具体实现细节应该依赖于抽象。这样可以降低模块间的耦合度，提高代码的灵活性和可扩展性。

四。设计模式的常见类型

1）单例模式

单例模式是一种前端设计模式，它保证一个类只有一个实例，并提供一个全局访问点。

目的：避免多次实例化相同类造成资源浪费的问题，并且能够方便地在不同的代码模块间共享该实例

顾名思义，懒汉设计模式，如果没有调用时，那么懒汉不会进行实例化类（添加了一个是否存在对象实例的判断）。

特点：只有在第一次调用创建实例的时候才会赋值，这样也就避免了不管用不用这个类，都直接进行初始化浪费内存。

常见应用场景：Vuex的store 全局状态管理、缓存管理、工具类的创建、 redux中的store、数据共享

写一个数据共享的实例：

class CacheManager {
    private static instance: CacheManager;
    private cache: Map<string, any>;
  
    private constructor() {
      this.cache = new Map();
    }
  
    public static getInstance(): CacheManager {
      if (!CacheManager.instance) {
        CacheManager.instance = new CacheManager();
      }
      return CacheManager.instance;
    }
  
    public set(key: string, value: any): void {
      this.cache.set(key, value);
    }
  
    public get(key: string): any {
      return this.cache.get(key);
    }
  
    public remove(key: string): void {
      this.cache.delete(key);
    }
  
    public clear(): void {
      this.cache.clear();
    }
  }
  
  // 示例用法
  const cacheManager = CacheManager.getInstance();
  
  cacheManager.set('username', 'John Doe');
  console.log(cacheManager.get('username')); // 输出：John Doe
  
  cacheManager.set('age', 30);
  console.log(cacheManager.get('age')); // 输出：30
  
  cacheManager.remove('username');
  console.log(cacheManager.get('username')); // 输出：undefined
  
  cacheManager.clear();
  console.log(cacheManager.get('age')); // 输出：undefined

2）发布-订阅模式（Publish-Subscribe Pattern），也叫消息队列模式

发布-订阅模式允许在应用程序中定义对象之间的一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会被通知和更新。

在发布/订阅模式中，有两种类型的对象：发布者和订阅者。发布者是事件的发出者，它通常维护一个事件列表，并且可以向列表中添加或删除事件。当某个事件发生时，它会将这个事件通知给所有订阅者。订阅者则是事件的接收者，它们订阅感兴趣的事件，并且在事件发生时接收通知。

目的：发布订阅模式可以帮助我们实现松耦合的设计，让对象之间的依赖关系变得更加灵活

常见应用场景：Vue.js 中的事件总线、Redux 中的 store 等

观察者模式 和 发布-订阅模式区别

截屏2025-02-16 01.04.37.png 观察者模式中观察者和目标直接进行交互，而发布订阅模式中统一由调度中心进行处理，订阅者和发布者互不干扰。这样一方面实现了解耦，还有就是可以实现更细粒度的一些控制。比如发布者发布了很多消息，但是不想所有的订阅者都接收到，就可以在调度中心做一些处理，类似于权限控制之类的。还可以做一些节流操作。

备注：

  1. MVVM模式：MVVM（Model-View-ViewModel）是一种前端设计模式，它将数据模型、视图和视图模型分离。视图模型负责将数据模型转换为视图可以使用的形式，并将视图的操作反馈到数据模型中。
  2. MVC模式：MVC（Model-View-Controller）是一种前端设计模式，它将数据模型、视图和控制器分离。控制器负责处理用户的输入，并更新数据模型和视图。
  3. 观察者模式：观察者模式是一种前端设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都会得到通知并自动更新。
  4. 单例模式：单例模式是一种前端设计模式，它保证一个类只有一个实例，并提供一个全局访问点。
  5. 工厂模式：工厂模式是一种前端设计模式，它通过一个工厂类来创建对象，而不是直接在代码中创建对象。这样可以降低代码的耦合度，提高代码的可维护性和可扩展性。
  6. 装饰器模式：装饰器模式是一种前端设计模式，它通过动态地给一个对象添加一些额外的功能来扩展它的功能。这样可以避免代码的重复和冗余。

参考文献

1：www.pipipi.net/22912.html/…

2：www.jianshu.com/p/1966dd2f7…

avatar
文章
阅读
粉丝