一个简单的pub-sub.js

pub-sub也就是发布订阅的模式是我们比较常用的设计模式,它一种一对多的依赖关系,在收到相应的消息之后会更新订阅该消息的所有事件。今天在写项目时候正好用到了,就写了一个简版的。

  class PubSub {
    constructor() {
      this.handlers = {}
    }
    // 订阅
    on(key, handler) {
      if (!(key in this.handlers)) {
        this.handlers[key] = []
      }
      this.handlers[key].push(handler)
    }
    // 卸载
    off(key, handler) {
      const index = this.handlers[key].findIndex(item => {
        item === handler
      })
      // 不存在直接返回
      if (index < 0) {
        return
      }

      if (this.handlers[key].length === 1) {
        // 只有一个直接删除key 节省内存
        delete this.handlers[key]
      } else {
        this.handlers[key].splice(index, 1)
      }
    }
    // 触发
    walk(key) {
      // 取出参数并转化为数组
      const args = Array.prototype.slice.call(arguments, 1)
      this.handlers[key].forEach(handler => {
        // 防止this指向乱掉
        handler.apply(this, args)
      });
    }
  }

测试

  const pubSub = new PubSub()
  fn1 = function(val1, val2) {
    console.log(val1, val2) // hah hahah
  }
  fn2 = function(val1) {
    console.log(val1) // hah
  }
  pubSub.on('ms1', fn1)
  pubSub.on('ms1', fn2)
  pubSub.walk('ms1', 'hah', 'hahah')

你可能感兴趣的:(一个简单的pub-sub.js)