Javascript设计模式之观察者模式

观察者模式

• 观察者模式（Observe）是前端开发中常用的一种设计模式，在各大框架中都有使用。
• 当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。观察者模式属于行为型模式。
• 它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新

原理（点菜过程） Observer代表我们自己 Subject代表餐厅

1. 当我们要点菜时（创建观察者） -- 创建Observer并传入Subject和菜品名称
2. 餐厅处理 (被观察者) -- Subject 将Observer存入到菜品列表中，并且提供相关的查询接口（查询当前菜品状态，修改菜品状态，存储菜品，触发上菜品尝）
3. 上菜品尝（修改被观察者的菜品状态） -- 当修改了菜品状态时，就会自动触发Observer的品尝函数

    // 被观察者（餐厅）提供各种方法
    class Subject{
      constructor(){
        this.status = ''
        this.observers = []
      }
      // 获取当前状态
      getStatus () {
        return this.status
      }
      // 设置状态
      setStatus (type) {
        this.status = type
        this.handle()
      }
      // 存储观察者到数组中
      storage (observer) {
        this.observers.push(observer)
      }
      // 循环执行观察者的函数
      handle () {
        this.observers.forEach(i => {
          if (i.name === this.status) {
            i.update()
          }
        })
      }
    }

    // 观察者  等待被触发
    class Observer{
      constructor(name, subject){
        this.name = name;
        this.subject = subject
        this.subject.storage(this) // 调用被观察者的storage方法存储当前观察者
      }
      update () {
        console.log(`${this.subject.getStatus()} 做好了，请品尝`)
      }
    }

    // 餐厅对象
    let subject = new Subject()

    // 点菜
    new Observer('宫保鸡丁', subject)
    new Observer('酸辣白菜', subject)
    // 修改状态触发当前观察者的update
    subject.setStatus('宫保鸡丁')

观察者模式和发布订阅模式

这两种模式本质上区别并不大，相比较观察者模式发布订阅模式多了一个订阅中心，通过订阅中心做事件处理

优缺点

1. 发布订阅模式通过订阅中心做事件处理就会降低代码的耦合度
2. 发布方和订阅方，没有任何关系，没有发布就可以订阅，没有订阅也可以发布
3. 发布订阅模式可扩展性比较强
4. 观察者模式相对比较轻量和简单，占用内存较少