初探设计模式 | 青训营

FsAnna
29 阅读4分钟

在前端开发中，应用设计模式可以提供可维护、可扩展和可重用的代码结构。在本文中，我们将探讨两种常见的设计模式在前端应用中的应用：单例模式和发布订阅模式。

🍨 1. 单例模式

单例模式是一种创建型设计模式，它确保一个类只有一个实例，并提供一个全局访问点来访问该实例。在前端应用中，单例模式常常用于管理全局状态、共享资源和提供统一的访问接口。

下面是一个使用单例模式来管理全局状态的示例代码：

class AppState {
  constructor() {
    this.data = {};
  }

  static getInstance() {
    if (!this.instance) {
      this.instance = new AppState();
    }
    return this.instance;
  }

  getData(key) {
    return this.data[key];
  }

  setData(key, value) {
    this.data[key] = value;
  }
}

const appState = AppState.getInstance();
appState.setData('username', 'John');
console.log(appState.getData('username')); // 输出：John

在上述代码中，AppState类是一个单例类，它只能创建一个实例。通过getInstance静态方法，我们可以获取该实例并对其进行操作。在这个例子中，我们使用AppState来管理全局状态数据，通过setData和getData方法来设置和获取数据。

使用单例模式可以确保全局状态的一致性和可控性，避免了多个实例之间的数据冲突和不一致。

单例模式常见的应用场景：

  1. 请求缓存（课程中的案例）：在前端应用中，我们经常需要发送异步请求来获取数据。有时候，我们希望在多次请求相同数据时只发送一次请求，并将结果缓存起来供后续使用。这时候，可以使用单例模式来创建一个请求缓存对象，确保只有一个实例存在，以便在多次请求时共享缓存数据。
  2. 配置管理：在前端应用中，我们通常需要管理一些全局配置，如API地址、认证信息等。使用单例模式可以创建一个全局的配置对象，确保只有一个实例存在，并提供统一的访问接口来获取和修改配置信息。
  3. 日志记录器：在前端应用中，我们经常需要记录日志以便进行调试和错误追踪。使用单例模式可以创建一个全局的日志记录器对象，确保只有一个实例存在，并提供统一的接口来记录日志信息。

🌈 2. 发布订阅模式

发布订阅模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都会被自动通知和更新。在前端应用中，发布订阅模式常常用于解耦组件之间的通信和事件处理。

下面是一个使用发布订阅模式来实现事件处理的示例代码：

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  emit(eventName, data) {
    const eventCallbacks = this.events[eventName];
    if (eventCallbacks) {
      eventCallbacks.forEach(callback => callback(data));
    }
  }
}

const eventEmitter = new EventEmitter();

// 订阅事件
eventEmitter.on('login', username => {
  console.log(`用户 ${username} 登录了`);
});

// 发布事件
eventEmitter.emit('login', 'John'); // 输出：用户 John 登录了

在上述代码中，EventEmitter类是一个简单的发布订阅类，它提供了on方法来订阅事件，以及emit方法来发布事件。当调用emit方法时，所有订阅了该事件的回调函数都会被触发。

使用发布订阅模式可以实现组件之间的解耦和灵活的事件处理。通过订阅感兴趣的事件，组件可以在事件发生时做出相应的处理，而不需要直接依赖于其他组件的实现细节。

发布订阅模式常见的应用场景：

  1. 用户上线订阅（课程中的案例）：在一个多用户的应用中，我们可能需要实时获取用户上线的信息。使用发布订阅模式，我们可以创建一个用户上线订阅的事件，当用户上线时，发布该事件，其他订阅了该事件的组件可以收到通知并做出相应的处理。
  2. 组件之间的消息传递：例如Vue组件之间通过props和emit进行通信的实现背后就使用了发布订阅模式的思想。
avatar
文章
阅读
粉丝