观察者模式[订阅发布模式]

废话不多说直接上代码【可以通过注释进行理解】

定义 发布者 类，并设置一个空数组，用来存放 订阅者

// 定义发布者类
class Subject {
  // 构造器
  constructor() {
    // 定义订阅者接受的容器
    this.observers = [];
  }
}

然后明确该 发布者类中的方法

• 添加订阅者
• 删除订阅者
• 发布更新

通过数组的 push 方法向 数组 中添加 订阅者

  // 添加订阅
  addObserves(observes) {
    // 向订阅者容器内添加订阅者消息
    this.observers.push(observes);
  }

通过数组的 indexOf 方法 找到 对应的 订阅者 对其采用 splice 方法进行删除操作

  // 取消订阅
  removeObserves(observes) {
    // 使用 indexOf 方法找到容器中指定的订阅者的索引值
    let index = this.observers.indexOf(observes);
    // 如果找到了
    if (index != -1) {
      this.observers.splice(index, 1); //将该订阅者从数组中删除掉
    }
  }

通过 forEach 遍历出每一个 订阅者 并调用 实例对象上的 update 方法 来实现 发布更新

  // 发布更新消息
  notify() {
    // 循环遍历订阅者数组 取出每一项 进行 消息更新的发布
    // 因为数组中的每一项都是 observes 实例化对象 所以拥有 update subscribeTo 两个方法
    this.observers.forEach((observe) => {
      observe.update();
    });
  }

定义 订阅者 类，并定义 update 更新操作

class Observes {

  //更新操作
  update() {
    console.log("subject消息更新了");
  
  }

}

其中比较核心的点就是 订阅者 发起 订阅 这个操作

// 订阅者要订阅那个 发布类
  subscribeTo(subject) {
    // 这里的 this 指得是 observes 实例对象
    // 调用 subject 实例对象的 addObervers 方法 将 observes 实例化对象传递过去
    subject.addObserves(this);
  }

最后来实现 下面的 三个动作

• 订阅者 订阅 发布者
• 订阅者 取消订阅
• 发布者 开始更新消息

// 创建发布者实例对象
let subject = new Subject();
// 创建订阅者实例对象
let oberver = new Observes();

oberver.subscribeTo(subject); //订阅者 订阅 发布者

subject.removeObserves(oberver); //订阅者 取消订阅

subject.notify(); //发布者开始 更新消息

完整的代码如下：

// 定义发布者类
class Subject {
  // 构造器
  constructor() {
    // 定义订阅者接受的容器
    this.observers = [];
  }

  // 添加订阅
  addObserves(observes) {
    // 向订阅者容器内添加订阅者消息
    this.observers.push(observes);
  }
  // 取消订阅
  removeObserves(observes) {
    // 使用 indexOf 方法找到容器中指定的订阅者的索引值
    let index = this.observers.indexOf(observes);
    // 如果找到了
    if (index != -1) {
      this.observers.splice(index, 1); //将该订阅者从数组中删除掉
    }
  }
  // 发布更新消息
  notify() {
    // 循环遍历订阅者数组 取出每一项 进行 消息更新的发布
    // 因为数组中的每一项都是 observes 实例化对象 所以拥有 update subscribeTo 两个方法
    this.observers.forEach((observe) => {
      observe.update();
    });
  }
}

class Observes {
  update() {
    console.log("subject消息更新了");
  }
  // 订阅者要订阅那个 发布类
  subscribeTo(subject) {
    // 这里的 this 指得是 observes 实例对象
    // 调用 subject 实例对象的 addObervers 方法 将 observes 实例化对象传递过去
    subject.addObserves(this);
  }
}

// 创建发布者实例对象
let subject = new Subject();
// 创建订阅者实例对象
let oberver = new Observes();

oberver.subscribeTo(subject); //订阅者 订阅 发布者

subject.removeObserves(oberver); //订阅者 取消订阅

subject.notify(); //发布者开始 更新消息