观察者模式

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

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

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);
          }
        })
      }
    } 

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

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

Obsever.fire('onsay');

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容