js设计模式（观察者、中介者模式）

观察者模式（订阅发布模式）

通过 订阅-发布 (subscribe-publish) 模型，消除组件之间双向依赖
消息的 发布者 (subject) 不需要知道 观察者 (observer) 的存在
两者只需要约定消息的格式（如何订阅、如何发布），就可以通信
我们先看一段代码

    document.querySelector(".div").innerHTML="我是周杰伦"
    document.getElementsByClassName("div")[0].innerHTML="我是周杰伦"
    $(".div").html("我是周杰伦1")

这种操作DOM的写法看起来也很简单，没什么大问题，但是如果有N多DOM的时候数据需要动态换，则这样的代码就非常难以维护，甚至取名字都会成为程序员头疼的事情。所以有些人就想是不是可以数据驱动。数据变化反馈到DOM上，DOM变化反馈到数据上，形成这样的双向数据流的格式会比现在的操作DOM会更加方便。
所以我们有了双向数据流VUE ，Angular，有了单向数据流的 CYCLE 和 REACT

双向数据绑定（two-way data binding）

意味着 UI 层所呈现的内容和 Model 层的数据动态地绑定在一起了，其中一个发生了变化，就会立刻反映在另一个上。比如用户在前端页面的表单控件中输入了一个值，Model 层对应该控件的变量就会立刻更新为用户所输入的值；反之亦然，如果 Modal 层的数据有变化，变化后的数据也会立刻反映至 UI 层。

单向数据流（one-way data flow）

意味着只有 Model 层才是单一数据源（single source of truth）。UI 层的变化会触发对应的消息机制，告知 Model 层用户的目的（对应 React 的 store）。只有 Model 层才有更改应用状态的权限，这样一来，数据永远都是单向流动的，也就更容易了解应用的状态是如何变化的。

言归正传 那么我们的订阅发布到底是什么呢

其实就是字面意思 你订阅了我的信息 等我更新了 我就给你一个反馈

大家都知道 VUE中有一个事件机制 业就是 $ON 和 $EMMIT 下面我们来看看 分析分析

$on

  Vue.prototype.$on = function (event: string | Array, fn: Function): Component {
    const vm: Component = this

    /*如果是数组的时候，则递归$on，为每一个成员都绑定上方法*/
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.$on(event[i], fn)
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      /*这里在注册事件的时候标记bool值也就是个标志位来表明存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。*/
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }

$emmit

Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this
    if (process.env.NODE_ENV !== 'production') {
      const lowerCaseEvent = event.toLowerCase()
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          `Event "${lowerCaseEvent}" is emitted in component ` +
          `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
          `Note that HTML attributes are case-insensitive and you cannot use ` +
          `v-on to listen to camelCase events when using in-DOM templates. ` +
          `You should probably use "${hyphenate(event)}" instead of "${event}".`
        )
      }
    }
    let cbs = vm._events[event]
    if (cbs) {
      /*将类数组的对象转换成数组*/
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      /*遍历执行*/
      for (let i = 0, l = cbs.length; i < l; i++) {
        cbs[i].apply(vm, args)
      }
    }
    return vm
  }

我们再来看看使用

Vue.$on("someFun",(data)=>{ ...dosomething})
Vue.$emmit("someFun",this.data)

在JS中怎么处理呢

//每一个on都会这样 
let callback[key].push(callbackFunction)
//在emmit的时候 
  callback[key].forEach(item=>item(data))

Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。

小结： 发布订阅模式就是 把观察者放在一个Array中 然后在被观察者发生改变时通知所有的观察者，使用回调函数的方式通知。

中介者模式

通过设置 消息中心 (message center)，避免组件之间直接依赖
所有的 协同者 (colleague) 只能通过 中介者 (mediator) 进行通信，
而相互之间不知道彼此的存在
当各个组件的消息出现循环时，消息中心可以消除组件之间的依赖混乱

var mediator = (function() {
    var topics = {},
        subUid = -1;
    var publish = function(topic, args) {
        if (!topics[topic]) {
            return false;
        }

        var subscribers = topics[topic],
            len = subscribers ? subscribers.length : 0;
        while (len--) {
            subscribers[len].func(topic, args);
        }

        return true;
    };

    var subscribe = function(topic, func) {
        if (!topics[topic]) {
            topics[topic] = [];
        }

        var token = (++subUid).toString();
        topics[topic].push({
            token: token,
            func: func
        });

        return token;
    };

    return {
        publish: publish,
        subscribe: subscribe,
        installTo: function(obj) {
            obj.publish = publish;
            obj.subscribe = subscribe;
        }
    }
}());


// 具体应用
var mod1 = {
    run: function(arg) {
        console.log('mod1 received ' + arg);
    }
};
var mod2 = {};
var topic = 'myTopic';
mediator.installTo(mod1);
mediator.installTo(mod2);
// mod1订阅消息
mod1.subscribe(topic, function(t, arg) {
    mod1.run(arg);
});
// mod2发布消息
mod2.publish(topic, 'data');

总结
观察者模式和中介者模式看起来非常的相似，核心原理都是一样的，这里有一个细微的差别，中介者模式注重状态告知，观察者模式侧重组件数据通信，其实我们这里完全使用观察者模式也可以实现状态告知，不过 但观察者是分发性的，所有的观察者都会受到信息，而且中介者则是单一的，对象的通信由中介者处理。
中介者模式 一般通过 观察者模式 实现
协同者 作为 发布者，中介者 作为 观察者
协同者 发布消息 -> 中介者 收到并处理消息 -> 中介者 直接发送消息给 协同者
协同者 不依赖于 中介者
当组件之间依赖关系简单时，可以直接使用 观察者模式
当组件之间依赖关系复杂是，需要借助 中介者模式 梳理关系