观察者模式

[SoloJiang]

观察者模式(Observer)：又被称作发布-订阅者模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间的功能的耦合。

在观察者模式中，核心是三种方法：订阅， 取消订阅， 发送订阅。即：

const Obsever = (function () {
  let message = {}; //将消息容器作为私有变量，防止被污染
  return {
    regist () {},
    fire () {},
    cancel () {} 
  }
})();

我们通过regist函数订阅注册某种类型的事件执行序列，通过fire函数去分发按序列执行某种类型的事件，通过cancel函数去取消订阅。

接下来，我们分步完成这三个函数：

regist (type, fn) {
  if (message[type] === undefined) {
    message[type] = [fn];
   } else {
     message[type].push(fn); // 若该类事件被注册过，则将函数推入执行序列
   }
  console.log('You han regist ' + type + ' 类型的 ' + fn.name + ' 事件');
}

fire (type, info) {
  if (message[type] === undefined || !(message[type] instanceof Array)) return;
  let len = message[type].length;
  message[type].forEach(fn => {
    fn(info);
  });
}

cancel (type, fn) { 
      if (message[type] !== undefined && message[type] instanceof Array) {
        let len = message[type].length;
        message[type].forEach((item, index) => {
          if (item === fn) { // 为了完成对象之间的解耦，能取消注册的函数必须就是注册的函数
            message[type].splice(index, 1);
            console.log('You had remove ' + fn.name);
          }
        })
      }
    } 

上面的代码浅显易懂，接下来贴一下测试代码，看看我们是不是完成了整个流程控制：

const obj = {
  say () {
    console.log('Hi~');
  }
}
Obsever.regist('onsay', obj.say);

Obsever.fire('onsay');

Obsever.cancel('onsay', obj.say);

以上就是最基本的观察者模式，也是书上所提到的，那么接下来的文章将会对此进行扩展，并且谈谈现在流行库的设计方法。