发布-订阅者模式

一、前言

学习vue的时候，对深入响应式原理模模糊糊的，现在简单一下理解。

二、简述VUE响应原理。

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。

三、什么是发布-订阅者模式

简单理解：比如一个商店，会员粉丝经常要询问有什么活动，员工每次都要做一遍解答，工作重复又麻烦，但是把所有会员的邮箱收集成名单，有活动时统一发送邮件。会员就是订阅者，商店就是发布者会在合适的时候遍历名单，依次给会员发布消息。发送邮件通知就是一个的发布—订阅模式。
多个订阅者（一般是注册的函数）同时监听同一个数据对象，当这个数据对象发生变化的时候会执行一个发布事件，通过这个发布事件会通知到所有的订阅者，使它们能够自己改变对数据对象依赖的部分状态。

四、发布订阅者模式的作用

主要为了处理一对多的场景,应用于不同情况下的不同函数的调用

优点：耦合性低，便于代码的维护
缺点：创建订阅者本身要消耗一定的时间和内存，可能订阅的消息未发生，但这个订阅者会始终存在于内存中

五、代码示例

创建发布-订阅者模式的对象

	function Event () {
   this.handlers = {};
 }
 
 Event .prototype = {
  	// 订阅事件
     on: function(eventType, handler){
         var self = this;
         if(!(eventType in self.handlers)) {
            self.handlers[eventType] = [];
         }
         self.handlers[eventType].push(handler);
         return this;
     },
      // 触发事件(发布事件)
     emit: function(eventType){
        var self = this;
        var handlerArgs = Array.prototype.slice.call(arguments,1);
        for(var i = 0; i < self.handlers[eventType].length; i++) {
          self.handlers[eventType][i].apply(self,handlerArgs);
        }
        return self;
     },
     // 删除订阅事件
     off: function(eventType, handler){
         var currentEvent = this.handlers[eventType];
         var len = 0;
         if (currentEvent) {
             len = currentEvent.length;
             for (var i = len - 1; i >= 0; i--){
                 if (currentEvent[i] === handler){
                     currentEvent.splice(i, 1);
                 }
             }
         }
         return this;
     }
 };