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

发布订阅模式特性

发布订阅模式(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. 订阅者和发布者之间的关系可能变得复杂。

总结

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

你可能感兴趣的:(原力值打卡,前端,设计模式)