带你了解前端设计模式-🍀观察者模式🍀

概述

观察者模式（Observer Pattern）定义了一种一对多的关系，当⼀个对象的状态发⽣改变时，所有依赖于它的对象都将得到通知，使得它们能够自动更新自己。

在前端开发中，观察者模式是一种常用的设计模式，用于建立对象之间的一对多依赖关系。在观察者模式中，有两种主要角色：观察者（Observer）和被观察者（Subject）。

观察者（Observer）：  观察者是订阅了被观察者的状态变化，并在状态变化时进行相应操作的对象。在前端开发中，观察者通常是一些 UI 组件或模块，它们会监听某个数据或状态的变化。

被观察者（Subject）：  被观察者是维护一组观察者对象列表，并提供注册、移除和通知观察者的方法。当被观察者的状态发生改变时，会通知所有订阅者进行相应的更新操作。

观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。

观察者模式又叫发布-订阅模式，但两者又有所不同，具体差异会在下一篇文章：带你了解前端设计模式-🍀发布-订阅模式🍀讲解，敬请期待。

观察者模式在现实生活中有许多应用场景，以下是一个简单的生活示例来说明观察者模式的概念：

假设你是一个老师（主题对象），而你的学生们是观察者。每当你发布新的作业（状态改变），你会通知所有的学生去完成作业。学生们收到通知后会按照要求完成作业，并在截止日期前提交给你。

在这个示例中，老师就是主题对象，而学生们是观察者。当老师发布新的作业（状态改变）时，通知所有的学生去完成作业（观察者更新）。每个学生可以独立完成作业，而不需要老师亲自提醒每个学生去完成作业。

这个生活示例中展示了观察者模式的工作原理：主题对象状态的改变会通知所有的观察者去做出相应的处理。在这种情况下，主题对象和观察者对象之间实现了一种松耦合的关系，从而提高了系统的灵活性和扩展性。

在前端开发中，观察者模式也经常被用于类似的场景，例如当一个数据源发生变化时，通知所有依赖该数据源的组件进行更新。观察者模式有助于实现组件之间的解耦合，提高代码的可维护性和可重用性。

实现

下面是一个前端观察者模式的简单示例代码实现：

// 主题对象
class Subject {
  constructor() {
    this.observers = [];
  }
​
  addObserver(observer) {
    this.observers.push(observer);
  }
​
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }
​
  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}
​
// 观察者对象
class Observer {
  constructor(name) {
    this.name = name;
  }
​
  update(data) {
    console.log(`${this.name} received data: ${data}`);
  }
}
​
// 创建主题对象
const subject = new Subject();
​
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
​
// 添加观察者
subject.addObserver(observer1);
subject.addObserver(observer2);
​
// 通知观察者
subject.notify('Hello, observers!');
​
// 移除观察者
subject.removeObserver(observer2);
​
// 再次通知观察者
subject.notify('Hello again, observers!');
​
//输出结果
// Observer 1 received data: Hello, observers!
// Observer 2 received data: Hello, observers!
​
// Observer 1 received data: Hello again, observers!

在这个示例中，我们定义了一个 Subject 类作为主题对象，和一个 Observer 类作为观察者对象。主题对象负责维护观察者列表，并实现 addObserver、removeObserver 和 notify 方法，用于添加观察者、移除观察者以及通知观察者。观察者对象实现了 update 方法，用于接收并处理主题对象通知的数据。

在示例中，我们创建了两个观察者对象 observer1 和 observer2，并将它们添加到主题对象中。然后通过调用主题对象的 notify 方法，通知观察者对象。最后，我们还演示了移除观察者的操作，通过调用 removeObserver 方法来移除一个观察者，确保该观察者不再接收到通知。

这样就实现了一个简单的前端观察者模式示例，展示了主题对象和观察者对象之间的一对多依赖关系，以及如何实现观察者的注册、通知和解绑。

优缺点

观察者模式是一种常见的设计模式，用于建立对象之间的一对多依赖关系。在前端开发中，观察者模式也被广泛应用。下面是观察者模式在前端开发中的优缺点：

优点：

1. 解耦：观察者模式实现了发布者与订阅者之间的解耦，发布者和订阅者之间可以互相独立地变化，不会影响到对方。
2. 扩展性：可以方便地添加新的观察者，使得系统可以灵活地适应需求变化。
3. 可重用性：观察者模式将发布者与订阅者解耦，可以使得不同的订阅者对象可以复用。
4. 实时通知：当发布者状态发生改变时，所有订阅者都会实时接收到通知，保持数据的同步性。

缺点：

1. 内存泄漏：如果订阅者未正确取消订阅或销毁，可能会导致内存泄漏问题，因为订阅者对象仍然存在。
2. 关注过多：由于所有订阅者都会收到发布者的通知，有时候可能会收到一些不感兴趣的信息，导致订阅者关注的事件过多。
3. 性能开销：当订阅者数量庞大时，发布者每次发布通知时需要遍历所有订阅者，可能会引起性能问题。

总的来说，观察者模式在前端开发中是一个非常有用的设计模式，可以帮助实现组件之间的通信和数据同步，提高系统的灵活性和可维护性。然而，在使用观察者模式时需要注意内存管理和性能优化，避免潜在的问题。