设计模式-发布订阅-全局通信

vue的Event总线的实现原理

模块化了，将原来的安装函数去掉了，然后对象封装成了一个闭包函数并立即调用，返回函数里面的方法。类似jq的写法。
这里的思想是，将Event作为全局调用，存到内存去了。Event此时可以理解为一个中介者，联系着订阅者和发布者。而上一章的写法则是需要对某个具体的对象进行安装。文章里面的比喻很形象，订阅者是买房的，发布者是卖房子的，买房的之前是对一家房地产公司订阅消息，现在扩展到对多家了，就需要一个中介来整合房地产公司，这样房地产公司发布消息，中介收集到后，再给到订阅者。Event对象的闭包写法就起到这样的作用。

let Event = (function(){
      let clientList = {}
      let listen = function(key, fn) {
        if( !clientList[key]) {
          clientList[key] = []
        }
        clientList[key].push(fn)
      }
      let trigger =function() { // 发布消息
        var key = Array.prototype.shift.call(arguments)
        let fns = clientList[key]
        if(!fns || fns.length == 0) return;
        for(var i = 0, fn; fn = clientList[key][i++];) {
          fn.apply(this, arguments) // 调用对应的函数
        }
      }
      let remove = function(key, fn) {
        let fns = clientList[key]
        if(!fns || fns.length === 0) return
        if(!fn) {
          fns && (fns.length = 0)
        } else {
          for(let i = fns.length - 1; i >= 0; i--) {
            if(fns[i] === fn) fns.splice(i, 1) // 移除订阅回调
          }
        }
        console.log(clientList[key])
      }
      return {
        listen,
        trigger,
        remove
      }
    })()
    let  fn1 = function(price, squareMeter) { // 订阅a
      console.log('价格', + price)
      console.log('squareMeter', + squareMeter)
    } 
    Event.listen('a', fn1) 
    Event.trigger('a', 2000, 80)