通俗易懂！发布订阅与观察者模式完全攻略！

2023-01-22 15:07:17

设计模式：释放设计的强大力量

在软件开发的广阔世界中，设计模式扮演着至关重要的角色，它们是经过时间考验的代码设计方案，能够有效解决特定问题，大幅提升代码的可复用性和可维护性。其中，发布订阅模式 、观察者模式 和装饰器模式 是三大核心模式，它们在实际开发中有着广泛的应用。

发布订阅模式：信息的优雅中介

发布订阅模式是一种灵活的通信机制，它允许多个对象（订阅者）订阅一个对象（发布者）的事件，当发布者的状态发生变化时，所有订阅者都会收到通知并作出响应。这种模式常见于以下场景：

自定义事件： 在 JavaScript 框架中，我们可以使用发布订阅模式来监听和触发自定义事件，从而实现组件间的高效交互。
Vue watch： Vue.js 提供了 watch 机制，它允许我们监控数据变化并执行相应的回调函数。
DOM 事件绑定： 通过在 DOM 元素上添加事件监听器，我们可以轻松地处理各种浏览器事件。

发布订阅模式的优势显而易见：

解耦： 发布者和订阅者之间是松散耦合的，它们无需直接交互，只需知道如何发布或订阅消息即可。
可扩展性： 这种模式很容易扩展，我们可以轻松地添加或删除订阅者，而不会影响其他订阅者。
可重用性： 发布订阅模式可以应用于各种场景，极大地提高了代码的可复用性。

观察者模式：紧密耦合的事件通知

观察者模式是一种特殊的发布订阅模式，它强调订阅者和发布者之间的紧密耦合。订阅者必须显式地向发布者注册，才能收到发布者的通知。这种模式通常用于以下场景：

状态变化通知： 当一个对象的内部状态发生变化时，观察者模式可以用来通知其他对象。
事件处理： 观察者模式可以用来处理各种事件，例如鼠标点击、键盘输入等。
数据绑定： 在数据绑定场景中，观察者模式可以实现数据的自动更新。

观察者模式也具备以下优点：

解耦： 观察者模式和发布订阅模式一样，也实现了订阅者和发布者之间的解耦。
可扩展性： 观察者模式也很容易扩展，我们可以轻松地添加或删除订阅者。
可重用性： 观察者模式可以应用于各种场景，提高了代码的可复用性。

装饰器模式：功能扩展的秘密武器

装饰器模式是一种强大的技术，它允许我们在不改变现有对象的基础上为其添加新功能。这种模式常见于以下场景：

功能扩展： 我们可以使用装饰器模式来扩展一个对象的现有功能，而无需修改其源代码。
动态代理： 装饰器模式可以实现动态代理，从而可以拦截对象的方法调用并进行相应的处理。
性能优化： 装饰器模式可以用来进行性能优化，例如，我们可以使用装饰器模式来缓存对象的方法调用结果。

装饰器模式的优点不容小觑：

可扩展性： 装饰器模式很容易扩展，我们可以轻松地添加或删除装饰器，而不会影响其他装饰器。
可重用性： 装饰器模式可以应用于各种场景，提高了代码的可复用性。
代码整洁： 装饰器模式可以使代码更加整洁，因为我们可以将不同的功能拆分成不同的装饰器，从而使代码更容易阅读和维护。

常见问题解答

发布订阅模式和观察者模式有什么区别？
- 发布订阅模式是松散耦合的，而观察者模式是紧密耦合的。
- 在发布订阅模式中，订阅者无需显式注册到发布者上，而在观察者模式中，订阅者必须显式注册到发布者上。
- 在发布订阅模式中，发布者主动将消息通知给订阅者，而在观察者模式中，订阅者主动从发布者那里获取消息。
什么时候应该使用装饰器模式？
- 当我们需要在不改变现有对象的基础上为其添加新功能时。
- 当我们需要实现动态代理时。
- 当我们需要进行性能优化时。

如何实现发布订阅模式？

// 发布者类
class Publisher {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(subscriber) {
    this.subscribers = this.subscribers.filter(s => s !== subscriber);
  }

  notifySubscribers() {
    this.subscribers.forEach(subscriber => subscriber.update());
  }
}

// 订阅者类
class Subscriber {
  constructor(publisher) {
    publisher.subscribe(this);
  }

  update() {
    // 更新订阅者状态
  }
}

如何实现观察者模式？

// 被观察者类
class Observable {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }

  notifyObservers() {
    this.observers.forEach(observer => observer.update());
  }
}

// 观察者类
class Observer {
  constructor(observable) {
    observable.addObserver(this);
  }

  update() {
    // 更新观察者状态
  }
}

如何实现装饰器模式？

// 装饰器函数
const withLogging = (target, property, descriptor) => {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Calling ${property} with args: ${args}`);
    return originalMethod.apply(this, args);
  };

  return descriptor;
};

// 使用装饰器
class MyClass {
  @withLogging
  myMethod(a, b) {
    return a + b;
  }
}