js设计模式-观察者模式

定义：

观察者模式又叫发布订阅模式，它定义了对象间的一种一对多的依赖关系。观察者模式让两个对象松耦合地联系在一块儿，虽然不太清楚彼此的细节，但这不影响他们之间的互相通讯。

思路

定义一个对象，在对象中实现注册事件，关闭事件和触发事件。

js 简单实现

var Observer = {
      data: {},
      // 订阅
      register: function (event, func) {
        if (this.data[event]) {
          this.data[event].push(func);
        } else {
          this.data[event] = [func];
        }
      },
      // 发布
      triggle: function (event) {
        let evtList = this.data[event];
        if (evtList) {
          for (let i = 0; i < evtList.length; i++) {
            evtList[i]();
          }
        } else {
          return false;
        }
      },
      // 退订
      off: function (event, func) {
        let evtList = this.data[event];
        if (evtList) {
          evtList.forEach(function (item, index, arr) {
            if (item === func) {
              arr.splice(index, 1);
            }
          })
        } else {
          return false;
        }
        if (!evtList.length) {
          delete this.data[event];
        }
      }
    }

优势：

1. 支持简单的广播通讯，自动通知全部已经订阅过的对象。
2. 页面载入后目标对象很容易与观察者存在一种动态关联，增长了灵活性。
3. 目标对象与观察者之间的抽象耦合关系可以单独扩展以及重用。

应用：

dom2级的事件处理程序就用了该模式。/ * node.js的不少模块也运用了该模式。*/

参考

• JavaScript设计模式与开发实战 曾探
• JavaScript设计模式之观察者模式（学习笔记）
• JS设计模式——观察者模式（通俗易懂）