实现观察者模式

一、观察者模式

      一对多的一种模式，当分发一个事件时，可以触发多个相关依赖。

二、用观察者模式实现一个简单的vue的bus.$emit/bus.$on

methods: {
    test() {
      let bus = this.Event()
      bus.$on('click0', function(value) {
        console.log("我是第一个click0:",value)
      })
      bus.$on('click0', function(value) {
        console.log('我是第二个click0:',value)
      })
      bus.$on('click1', function(value) {
        console.log("click1:",value)
      })
      bus.$on('click2', function(value) {
        console.log("click2:",value)
      })

      bus.$emit('click0', '我是click0')
      bus.$emit('click1', '我是click1')
      bus.$emit('click3', '我是没有订阅的click3')
    },

    Event() {
      let $on, $emit, obj={}
      $on = (key, fun) => {
        let stack, _ref //stack是盒子
        stack = (_ref = obj[key]) ? _ref : (obj[key] = [])
        return stack.push(fun)
      }

      $emit = (key, value) => {
        let fn, stack, _i, _len, _ref
        stack = (_ref = obj[key]) ? _ref : (obj[key] = [])
        for (_i = 0, _len = stack.length; _i < _len; _i++) {
          fn = stack[_i]
          //函数默认return false
          if (fn.call(this, value) === false) {
            return false
          }
        }
      }

      return {
              $on: $on,
              $emit: $emit
            }
    },
  },

　　参考资料：

      观察者模式和订阅-发布模式的区别：https://juejin.im/post/5a14e9edf265da4312808d86

      观察者模式：http://www.alloyteam.com/2012/10/commonly-javascript-design-pattern-observer-mode/