JS设计模式(观察者模式)

观察者模式

介绍

  • 发布 & 订阅(将某件事说好之后只需等待,如:订报纸,订牛奶)
  • 一对多

演示

UML类图

JS设计模式(观察者模式)
JS设计模式(观察者模式)

场景

  1. 网页时间绑定

JS设计模式(观察者模式)

  1. Promise
    JS设计模式(观察者模式)
    JS设计模式(观察者模式)

  2. jQuery callback
    JS设计模式(观察者模式)

  3. nodejs自定义事件
    JS设计模式(观察者模式)
    JS设计模式(观察者模式)
    在node的stream中用到了自定义事件
    JS设计模式(观察者模式)
    readline 中也用到了自定义事件
    JS设计模式(观察者模式)

  4. 其他场景
    1、nodejs中:处理http请求;多进程通讯
    JS设计模式(观察者模式)

    2、vue 和 react 组件生命周期触发
    JS设计模式(观察者模式)

    3、vue watch
    JS设计模式(观察者模式)

总结

  • 主题和观察者分离,不是主动触发而是被动监听,两者解耦
  • 符合开放封闭原则