【前端设计模式】之发布订阅模式

发布订阅模式特性

发布订阅模式（Publish-Subscribe Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生变化时，它会通知多个订阅者（观察者）进行相应的处理。发布订阅模式的主要特性包括：

1. 发布者（Publisher）：也称为主题或事件源，负责发布事件或通知。
2. 订阅者（Subscriber）：也称为观察者或监听器，负责订阅事件或通知，并在事件发生时执行相应的处理。
3. 事件或消息：发布者发布的具体事件或消息。
4. 订阅和取消订阅：订阅者可以选择订阅感兴趣的事件，并可以随时取消订阅。
5. 事件系统：通过自定义事件实现了发布订阅模式。例如DOM事件、自定义事件等都是基于发布订阅模式实现的。
6. 消息总线：用于组件间通信和解耦。例如Vue.js中的$emit和$on方法就是基于发布订阅模式实现的。

应用示例

// 定义发布者对象
class Publisher {
  constructor() {
    this.subscribers = [];
  }
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }
  unsubscribe(subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  }
  publish(message) {
    this.subscribers.forEach((subscriber) => {
      subscriber.notify(message);
    });
  }
}
// 定义订阅者对象
class Subscriber {
  notify(message) {
    console.log(`Received message: ${message}`);
    // 处理接收到的消息
  }
}
// 使用示例
const publisher = new Publisher();
const subscriber1 = new Subscriber();
const subscriber2 = new Subscriber();
publisher.subscribe(subscriber1);
publisher.subscribe(subscriber2);
publisher.publish("Hello World"); // 发布消息，输出：Received message: Hello World
 

在上述事例中，我们定义了一个发布者对象Publisher和一个订阅者对象Subscriber。发布者对象负责维护一组订阅者对象，并在事件发生时通知订阅者。订阅者对象通过订阅感兴趣的事件，并在事件发生时执行相应的处理。

Vue双向绑定

在Vue源码中，双向绑定的实现基于发布订阅模式。Vue通过使用观察者模式和发布订阅模式相结合的方式，实现了数据的响应式和视图的自动更新。

基本的代码结构如下：

1. Dep（依赖）

Dep是一个用于收集依赖和通知更新的类。它维护了一个订阅者列表（subs），用于存储所有订阅该属性变化的Watcher对象。

class Dep {
  constructor() {
    this.subs = [];
  }
  addSub(sub) {
    this.subs.push(sub);
  }
  notify() {
    this.subs.forEach((sub) => sub.update());
  }
}
 

2. Watcher（观察者）

Watcher是一个用于订阅数据变化并执行相应操作的类。在创建Watcher实例时，会将其添加到Dep.target属性上，并触发数据的getter方法，从而将Watcher对象添加到对应属性的依赖列表中。

class Watcher {
  constructor(vm, key, updateFn) {
    this.vm = vm;
    this.key = key;
    this.updateFn = updateFn;
    Dep.target = this;
    this.vm[this.key]; // 触发getter，收集依赖
    Dep.target = null;
  }
  update() {
    this.updateFn.call(this.vm, this.vm[this.key]); // 更新视图
  }
}

3. Observer（观察者）

Observer是一个递归遍历对象属性并将其转换为响应式对象的类。在遍历过程中，会为每个属性创建一个Dep实例，并使用Object.defineProperty方法对属性进行劫持，从而实现数据的响应式。

class Observer {
  constructor(obj) {
    this.obj = obj;
    this.walk(obj);
  }
  walk(obj) {
    Object.keys(obj).forEach((key) => {
      this.defineReactive(obj, key, obj[key]);
    });
  }
  defineReactive(obj, key, val) {
    const dep = new Dep();
    Object.defineProperty(obj, key, {
      get() {
        dep.depend();
        return val;
      },
      set(newVal) {
        if (newVal !== val) {
          val = newVal;
          dep.notify();
        }
      },
    });
  }
}
 

4. Vue实例

在Vue实例的初始化过程中，会对数据对象进行观察，并为每个属性创建一个Observer实例。同时，会为模板中的每个表达式创建一个Watcher实例，用于订阅数据变化并更新视图。

class Vue {
  constructor(options) {
    this.data = options.data;
    this.observe(this.data);
    new Watcher(this, options.key, options.updateFn);
  }
  observe(data) {
    if (!data || typeof data !== "object") return;
    Object.keys(data).forEach((key) => {
      this.defineReactive(data, key, data[key]);
    });
  }
  defineReactive(obj, key, val) {
    /* ... */
  }
}
 

通过以上代码结构，Vue源码实现了基于发布订阅模式的双向绑定。当数据发生变化时，触发setter方法通知依赖（Dep）进行更新；当模板中的表达式订阅了数据变化时，触发getter方法将Watcher对象添加到依赖列表中。这样，当数据变化时，依赖列表中的Watcher对象会自动执行相应的回调函数，从而更新视图。

需要注意的是，以上代码结构是对Vue源码实现双向绑定的简化描述，并不包含Vue源码中的所有细节和优化。Vue源码中还包含了更多复杂的逻辑和处理机制，例如异步更新、批量更新等。这些细节使得Vue的双向绑定更加高效和可靠。

优缺点

优点

1. 解耦：发布者和订阅者之间解耦，使得它们可以独立变化。
2. 可扩展性：可以方便地添加新的发布者或订阅者。
3. 灵活性：可以动态地添加或删除订阅，根据需求选择感兴趣的事件。

缺点

1. 订阅过多时可能影响性能。
2. 订阅者和发布者之间的关系可能变得复杂。

总结

发布订阅模式是一种常用的设计模式，在前端开发中有广泛应用。它通过定义一种一对多的依赖关系，实现了对象之间的解耦和灵活性。通过使用发布订阅模式，可以实现事件系统、消息总线等功能。然而，需要根据具体情况权衡使用发布订阅模式所带来的优缺点。