程序员最爱！解锁观察者模式，从JS设计模式玩转前端响应设计！

见解分享

2023-12-01 01:13:25

观察者模式：前端开发的灵丹妙药

欢迎来到前端开发的奇妙世界，在这里，交互是王道！而谈到交互，观察者模式就是那个闪闪发光的救星，它能让你轻松应对任何响应式交互，让你的代码焕发优雅与活力。

观察者模式：揭开互动之谜

想象一下，一个按钮，当它被点击时，页面上的图片就能神奇地更换。这是典型的响应式交互，而观察者模式就是解决它的秘密武器。

观察者模式将职责分配给两个角色：观察者 和可观察对象 。观察者是需要响应变化的元素，而可观察对象则是负责发出变化通知的元素。当可观察对象发生变化时，它会向所有观察者发出通知，而观察者会立即做出相应的反应。

这种模式的精髓在于，它完全解耦了观察者和可观察对象之间的联系。观察者无需了解可观察对象的内部运作方式，它只需要知道如何处理变化即可。这种设计让代码的维护和扩展变得轻而易举，也让交互更加灵活多变。

实战演练：用 JavaScript 解锁观察者模式

理论固然重要，但实践才是检验真知的唯一标准。让我们用 JavaScript 来亲手实现一个简单的观察者模式，让按钮和图片来一场精彩的互动吧！

// 可观察对象：图片
class Image {
  constructor() {
    this.observers = [];
  }

  setImage(newImage) {
    this.image = newImage;
    this.notifyObservers();
  }

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

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

// 观察者：按钮
class Button {
  constructor(image) {
    this.image = image;
    this.image.addObserver(this);
  }

  onClick() {
    // 当按钮被点击时，更换图片
    this.image.setImage('newImage.jpg');
  }

  update() {
    // 当图片发生变化时，更新按钮的显示
    this.render();
  }

  render() {
    // 更新按钮的显示
  }
}

// 创建可观察对象和观察者
const image = new Image();
const button = new Button(image);

// 按钮被点击时，更换图片
button.onClick();