三分钟学JS设计模式（二）观察者模式

观察者模式

一、什么是观察者模式

观察者模式（Observer），当一个对象被修改时，则会自动通知依赖它的对象。

举个栗子：老王和小李都关注（订阅、subscribe）了人民日报，每天会有送报员给所有订阅的送报（notify），此时老王和小李都会拿到报纸。

二、 优缺点

• 优点：

  • 1、有一套触发机制。
  • 2、观察者和被观察者是抽象耦合的（两者的关联仅有订阅和通知两种行为）。

• 缺点：

  • 1、被观察者有很多观察者会有很多，通知到所有的观察者需要花费很多时间。
  • 2、被观察者与观察者有互相依赖那可能会死循环。
  • 3、观察者只知道发生变化，不知道怎么变化。

注意：
从观察者模式引申出了发布订阅模式，有一定的区别，但是个人觉得是观察者模式plus。
传送门：三分钟学JS设计模式（番外一）观察者模式与发布-订阅模式

三、场景例子、代码实现

模拟报纸订阅

// 【报社观察者】
const Observer = function () {
  // 订阅者信息
  this.listeners = [];
  // 定期出报纸
  this.interval = setInterval(() =>{
  	this.notify(`${new Date()}：人民日报`)
  },1000 * 60 * 60 * 24)
};
// 订阅操作，返回取消当前订阅的方法
Observer.prototype.subscribe = function (listener) {
  this.listeners.push(listener);
  return () => this.unsubscribe(listener);
};
// 取消订阅操作
Observer.prototype.unsubscribe = function (listener) {
  this.listeners = listeners.filter(ln => listener !== ln);
};
// 发报纸
Observer.prototype.notify = function (text) {
  this.listeners.forEach(listener => listener(text));
};

// 【用户】
const Person = function (name) {
  this.read = function (text) {
    console.log(`${name}收到了报纸：${text}`);
  };
};


// 公众号
const newsObserver= new Observer();

const laoWang = new Person('老王');
const xiaoLi = new Person('小李');

// 老王订阅
newsObserver.subscribe(laoWang.read);
// 小李订阅
newsObserver.subscribe(xiaoLi.read);

// 每天都会有一条阅读信息
老王收到了报纸：Mon Dec 21 2020 09:35:08 GMT+0800 (中国标准时间)：人民日报
小李收到了报纸：Mon Dec 21 2020 09:35:08 GMT+0800 (中国标准时间)：人民日报