美文网首页
一个简单的pub-sub.js

一个简单的pub-sub.js

作者: 哇塞田 | 来源:发表于2018-12-10 16:59 被阅读6次

    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

          本文链接:https://www.haomeiwen.com/subject/oakdhqtx.html