昨天看到淘宝前端讲解react组件通信时,有个观察者模式,看了看模块的实现方式,觉得这个思想蛮巧妙的,今天来研究一下.

以下内容摘自原文

const eventProxy = {
  onObj: {},
  oneObj: {},
  on: function(key, fn) {
    if(this.onObj[key] === undefined) {
      this.onObj[key] = [];
    }

    this.onObj[key].push(fn);
  },
  one: function(key, fn) {
    if(this.oneObj[key] === undefined) {
      this.oneObj[key] = [];
    }

    this.oneObj[key].push(fn);
  },
  off: function(key) {
    this.onObj[key] = [];
    this.oneObj[key] = [];
  },
  trigger: function() {
    let key, args;
    if(arguments.length == 0) {
      return false;
    }
    key = arguments[0];
    args = [].concat(Array.prototype.slice.call(arguments, 1));

    if(this.onObj[key] !== undefined
      && this.onObj[key].length > 0) {
      for(let i in this.onObj[key]) {
        this.onObj[key][i].apply(null, args);
      }
    }
    if(this.oneObj[key] !== undefined
      && this.oneObj[key].length > 0) {
      for(let i in this.oneObj[key]) {
        this.oneObj[key][i].apply(null, args);
        this.oneObj[key][i] = undefined;
      }
      this.oneObj[key] = [];
    }
  }
};

• on、one：on 与 one 函数用于订阅者监听相应的事件，并将事件响应时的函数作为参数，on 与 one 的唯一区别就是，使用 one 进行订阅的函数，只会触发一次，而 使用 on 进行订阅的函数，每次事件发生相应时都会被触发。

• trigger：trigger 用于发布者发布事件，将除第一参数（事件名）的其他参数，作为新的参数，触发使用 one 与 on 进行订阅的函数。

• off：用于解除所有订阅了某个事件的所有函数。

以上内容摘自原文

on/one

• 监听事件

• 当传入事件 fn 时，首先会对应私有数据对象 onObj/oneObj 是否有对应 key key值的value.没有则直接推入该事件 fn.

off

• 清除事件

• 传入key值 key 时,则直接清除私有数据对象 onObj/oneObj 内的所有数据.

trigger

• 发布事件

• 将传入的事件 key 值和 args 值分开存储.

• 判断 onObj 中是否有该 key 值,如果有则调用该事件并且传入 null 的上下文.

总结

说简单点就是,声明一个全局的对象,用以存储对应值的事件,当此对应值的事件被激发时,才运行此事件.

实践

const eve={
 data:{},
 on:function(k,fn){
  if(this.data[k]===undefined){this.data[k]=[];}
  this.data[k].push(fn);
 },
 emit:function(k,...args){
  if(this.data[k]!==undefined&&this.data[k].length>0){
   for(let e of this.data[k]){
    e.apply(null,args);
   }
  }
 }
}

eve.on('on',(msg)=>{console.log(msg)}) // 存储一个 on 值的事件,显示该事件的参数

eve.emit('on',1) // 激发 on 值的事件,并传入一个参数

// 控制台打印 “1”