前端设计模式|豆包MarsCode AI刷题

用户922520447102
66 阅读4分钟

设计模式

分类

  • 创建型：如何创建一个对象
  • 结构性：如何灵活地将对象组装成较大的结构
  • 行为型：负责对象间的高效通信和职责划分

浏览器中的设计模式

单例模式

基础概念

单例模式是一种常用的设计模式，它确保一个类只有一个实例，并提供一个全局访问点来获取这个实例。在前端开发中，单例模式可以用来确保某个对象在全局范围内只有一个实例，这在管理全局状态或者共享资源时非常有用。

单例模式的特点
  1. 唯一性：确保一个类只有一个实例。
  2. 全局访问：提供全局访问点来获取这个实例。
  3. 延迟初始化：实例在第一次被需要时才创建。
js实现单例模式
var Singleton = (function() {
  var instance;

  function init() {
    function Singleton() {}
    Singleton.prototype.greet = function() {
      console.log('Hello from Singleton');
    };
    return new Singleton();
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = init();
      }
      return instance;
    }
  };
})();

var s1 = Singleton.getInstance();
var s2 = Singleton.getInstance();

s1.greet(); // Hello from Singleton
s2.greet(); // Hello from Singleton
console.log(s1 === s2); // true
使用场景
  • 全局状态管理：如用户认证信息、配置设置等。
  • 资源共享：如数据库连接、文件系统访问等。
  • 控制实例数量：如创建昂贵的资源，如Web Workers
注意事项
  • 单例模式可能会导致代码的耦合度增加，因为它强制所有使用这个单例的代码都依赖于同一个实例。
  • 在多线程环境中，单例模式可能需要额外的同步机制来确保线程安全。
  • 在前端开发中，单例模式的使用需要谨慎，以避免全局状态污染和难以追踪的副作用。

发布订阅模式

基础概念

发布订阅模式，也称为观察者模式，是一种设计模式，允许对象在状态变化时通知多个观察者对象，而不是直接将它们联系起来。这种模式可以降低系统各部分之间的耦合度，并提高代码的可维护性和可扩展性。在前端开发中，发布订阅模式常用于事件处理、状态管理等场景。

发布订阅模式的主要组件
  1. 发布者（Publisher） ：当状态变化时，发布者会发布消息。
  2. 订阅者（Subscriber） ：订阅特定消息，并在发布者发布消息时接收通知。
  3. 消息（Message） ：发布者和订阅者之间的通信媒介。
  4. 事件通道（Event Channel） ：管理订阅者和消息的分发
工作流程
  1. 订阅（Subscribe） ：订阅者向事件通道订阅特定主题的消息。
  2. 发布（Publish） ：当发布者有状态变化时，向事件通道发布消息。
  3. 通知（Notify） ：事件通道将消息分发给所有订阅了该主题的订阅者。
原生js实现发布订阅模式
// 事件通道
const eventChannel = {
  subscribers: {},
  
  subscribe: function(topic, callback) {
    if (!this.subscribers[topic]) {
      this.subscribers[topic] = [];
    }
    this.subscribers[topic].push(callback);
  },
  
  publish: function(topic, data) {
    if (this.subscribers[topic]) {
      this.subscribers[topic].forEach(callback => callback(data));
    }
  }
};

// 订阅消息
eventChannel.subscribe('message', data => console.log('Received message:', data));

// 发布消息
eventChannel.publish('message', 'Hello, World!');
使用场景
  1. 事件处理：在不同组件或模块之间传递事件，如用户交互、网络响应等。
  2. 状态管理：在大型应用中管理全局状态，如用户认证、主题切换等。
  3. 解耦组件：减少组件之间的直接依赖，提高代码的可维护性。
注意事项
  • 内存泄漏：如果订阅者没有正确取消订阅，可能会导致内存泄漏。
  • 性能问题：如果订阅者数量过多，可能会影响性能。
  • 错误处理：需要考虑消息传递过程中的错误处理机制。

总结

单例模式属于创建型设计模式，是一种强大的设计模式，但在使用时需要根据具体情况权衡其利弊。发布订阅模式属于行为型设计模式，是一种非常灵活的设计模式，它可以帮助我们在前端开发中有效地管理和传递消息，降低组件之间的耦合度，并提高代码的可维护性和可扩展性。在使用时，需要注意内存泄漏和性能问题，并合理设计消息传递机制。

复制分享

avatar
文章
阅读
粉丝