观察者模式 手斯HR

看的再多不如自己手写一次!!!!!

观察者模式 （三要素）：

• 由回调函数构成的订阅者数组
• 用于添加和删除订阅者的addSubscriber方法与removeSubscriber方法
• 用于接收并传递数据给订阅者 publish方法

    class Observer {
        constructor() {
          //由回调函数构成的订阅者数组
          this.subscriber = [];
        }

        // 订阅者的方法
        addSubscriber(callback) {
          if (typeof callback === "function") {
            this.subscriber.push(callback);
          }
        }

        // 删除订阅者方法
        removeSubscriber(callback) {
          if (typeof callback === "function") {
            this.subscriber = this.subscriber.filter((sub) => sub !== callback);
          }
        }

        // 用于接收并传递数据给订阅者方法
        publish(data) {
          this.subscriber.forEach((sub) => {
            if (typeof sub === "function") {
              sub(data);
            }
          });
        }
      }

如何变为了一个发布者

    // 这样可以轻松实现 任意对象变成一个Observer 
      class Logger extends Observer {
        writePost(content) {
          this.publish(content);
        }
      }
      // 实例化
      const logger = new Logger(); // 此时logger这个实例对象原型上就有了observer中的所有方法

接下来我们就可以实际使用

// 订阅方
const tom = {
    read(data) {
      console.log('tom订阅者 接收到的消息:', data);
    }
}
// 订阅方
const lilei = {
    read(data) {
      console.log('lilei订阅者 接收到的消息:', data);
    }
}

logger.addSubscriber(tom.read)
logger.addSubscriber(lilei.read)

// 推送消息方
logger.writePost('早点起床!') // 广播会给所有订阅者发送此消息

结果为:

// 删除一个订阅
logger.removeSubscriber(tom.read)
logger.writePost('下班了!') // // 广播会给所有订阅者发送此消息

// 结果为:

至此结束！ 自己不写写永远无法体会！！！