【前端设计模式】之观察者模式

本文介绍: 观察者模式是一种常用的设计模式，在前端开发中有广泛应用。它通过定义一种一对多的依赖关系，实现了对象之间的解耦和灵活性。通过使用观察者模式，可以实现事件处理、数据绑定、响应式系统等功能。然而，需要根据具体情况权衡使用观察者模式所带来的优缺点。

观察者模式特性

观察者模式是一种行为型设计模式，它定义了一种一对多的依赖关系，当一个对象的状态发生改变时，其依赖者（观察者）会自动收到通知并更新。观察者模式的主要特性包括：

主题（Su bje ct）：也称为被观察者或发布者，负责维护一组观察者对象，并在状态变化时通知观察者。
观察者（Ob server）：也称为订阅者或监听器，负责接收主题的通知并进行相应的处理。
通知机制：主题在状态变化时会主动通知所有注册的观察者对象。最佳实践及代码示例：在前端开发中，观察者模式常用于以下场景：
事件处理：通过事件机制实现了观察者模式。DOM事件、自定义事件等都是基于观察者模式实现的。
数据绑定：当数据发生变化时，自动更新相关视图。

应用示例

// 定义主题对象
class Subject {
  constructor() {
    this.observers = [];
  }
  addObserver(observer) {
    this.observers.push(observer);
  }
  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }
  notify(data) {
    this.observers.forEach((observer) =&gt; {
      observer.update(data);
    });
  }
}
// 定义观察者对象
class Observer {
  update(data) {
    console.log(`Received data: ${data}`);
    // 处理接收到的数据
  }
}
// 使用示例
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.addObserver(observer1);
subject.addObserver(observer2);
subject.notify("Hello World"); // 通知所有观察者，输出：Received data: Hello World

在上述示例中，我们定义了一个主题对象Subject和一个观察者对象Observer。主题对象负责维护一组观察者对象，并在状态变化时通知观察者。观察者对象通过注册到主题对象中，接收到主题的通知后进行相应的处理。

Vue 双向 绑定

Vue 源码通过观察者模式实现了双向数据绑定。下面是Vue 源码中实现双向绑定的大致代码实现：

首先，Vue通过Object.defineProperty方法对数据对象进行劫持，将其转化为响应式对象。在这个过程中，Vue会为每个属性创建一个Dep对象，用于收集依赖和通知更新。
在模板编译阶段，Vue会解析模板中的指令和表达式，并创建对应的指令对象。每个指令对象都会关联一个Watcher对象。
Watcher对象负责订阅数据变化，并在数据变化时执行相应的回调函数。它会将自身添加到相关属性的依赖（Dep）中。
当数据发生变化时，被劫持的属性会触发相应的setter函数。在这个过程中，属性关联的依赖（Dep）会通知所有订阅者（即相关的Watcher）进行更新。
更新过程中，订阅者（即相关的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]); // 更新视图
  }
}
// 定义依赖对象
class Dep {
  constructor() {
    this.subscribers = [];
  }
  depend() {
    if (Dep.target &amp;&amp; !this.subscribers.includes(Dep.target)) {
      this.subscribers.push(Dep.target); // 收集依赖
    }
  }
  notify() {
    this.subscribers.forEach((subscriber) =&gt; subscriber.update()); // 通知更新
  }
}
// 定义响应式数据劫持函数
function 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(); // 通知更新
      }
    },
  });
}
// 创建Vue实例
class Vue {
  constructor(options) {
    this.data = options.data;
    for (let key in this.data) {
      defineReactive(this.data, key, this.data[key]);
    }
    new Watcher(this, options.key, options.updateFn);
  }
}

以上是对Vue源码实现双向绑定的简要描述。定义了Watcher观察者对象和Dep依赖对象。在defineReactive函数中，我们使用Object.defineProperty对数据对象进行劫持，当数据发生变化时，会触发相应的getter和setter函数。在getter函数中，我们收集依赖；在setter函数中，我们通知依赖进行更新。通过创建Vue实例时创建的观察者对象，我们实现了数据和视图之间的双向绑定。