设计模式-----观察者模式

一、概念

1、Observer模式的概念       

      (Observer)被称作发布－订阅者模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。      

      (Observer)模式是行为模式之一，它的作用是当一个对象的状态发生变化时，能够自动通知其他关联对象，自动刷新对象状态。     

好处：

• 可广泛应用于异步编程中，是一种替代传递回调函数的方案。       
• 可取代对象之间硬编码的通知机制，一个对象不用再显示地调用另外一个对象的某个接口。 两对象轻松解耦。          

2、Observer模式的角色       

Subject（被观察者）        

被观察的对象。当需要被观察的状态发生变化时，需要通知队列中所有观察者对象。Subject需要维持（添加，删除，通知）一个观察者对象的队列列表。         

ConcreteSubject -- 被观察者的具体实现。包含一些基本的属性状态及其他操作。       

Observer（观察者）         

接口或抽象类。当Subject的状态发生变化时，Observer对像将通过一个callback函数得到通知。   

ConcreteObserver -- 观察者的具体实现。得到通知后将完成一些具体的业务逻辑处理。     

二、 应用场景

<script>  
let subscribe = { 'eating': [] };
    // 订阅
    subscribe.eating[0] = () => {
      console.log('我是Ben，我要去吃饭');
    }
    subscribe.eating[1] = () => {
      console.log('我是James，我要去吃饭');
    }
    subscribe.eating[2] = () => {
      console.log('我是Oscar，我要去吃饭');
    }
    // 发布
    let treat = (() => {
      let eatingPersion = subscribe.eating;
      let len = eatingPersion.length;
      for (let i = 0; i < len; i++) {
        subscribe.eating[i]();
      }
    })();
    /*
      如果Judy也想去吃饭的话，不需要告诉任何人， 只需要自己订阅就好啦。
      But这里有个缺陷，就是Ben今天想减肥，想要取消订阅，没有提供取消订阅的的机制
    */
    // 完善先取消订阅模式
    var Observer = (function () {
      //静态私有变量，用来存放不对外暴露的消息列队
      var _rank = {};
      return {
        //订阅消息接口
        register: function (type, fn) {
          //如果这个消息的方法不存在，则放入消息列队中
          if (typeof _rank[type] === 'undefined') {
            _rank[type] = [fn];
          }
          //如果这个消息的方法是存在的，就给这个消息的数组中添加这个方法
          else {
            _rank[type].push(fn);
          }
        },
        //发布消息接口
        fire: function (type, argsJson) {
          //如果消息未定义，就返回
          if (!_rank[type]) { return; }
          //对消息的参数进行包装
          var newArgs = {
            type: type,
            args: argsJson || {}
          };
          //遍历执行这个消息列队中的方法
          for (var i = 0, l = _rank[type].length; i < l; i++) {
            _rank[type][i].call(this, newArgs);
          }
        },
        //消息注销方法
        remove: function (type, fn) {
          //确保这个消息列队是存在的
          if (_rank[type] instanceof Array) {
            //从最后一个方法开始查找
            for (var i = _rank[type].length - 1; i >= 0; i--) {
              //如果存在就从列队中删除
              _rank[type][i].toString() === fn.toString() && _rank[type].splice(i, 1);
            }
          }
        }
      }
    })();
    // PM瑞瑞发布
    Observer.fire('eating', { msg: 'pm瑞瑞请客～' });
    // 订阅
    Observer.register('eating', function (params) {
      console.log(params.type + ': 我是Ben,我要去吃饭,' + params.args.msg);
    });
    Observer.register('eating', function (params) {
      console.log(params.type + ': 我是James,我要去吃饭,' + params.args.msg);
    });
    Observer.register('eating', function (params) {
      console.log(params.type + ': 我是Oscar,我要去吃饭,' + params.args.msg);
    });
    // Ben取消订阅
    Observer.remove('eating', function (params) {
      console.log(params.type + ': 我是Ben,我要去吃饭,' + params.args.msg);
    });
    // PM瑞瑞重新发布
    Observer.fire('eating',{msg:'pm瑞瑞请客～'});

    /*
      此时，如果还有人要吃饭，只需要订阅一个位置就好，并且其它的活动也可以通过模式去订阅，
      发布，撤销～。观察者的使用环境是这样的，例如：多人协作中在初始化函数init()中不同人
      都要加事件，如果直接添加，总是怕出问题，此时，如果通过定义一个观察者，
      就方便多了，可以放心大胆的操作。又例如年久失修的代码要更改，但是关系错中复杂，最好的
      方式就是给事件都归入消息列队，然后添加自己的事件，这样就万事大吉了～
    */
 </script>

/**
  * 发布订阅模式(观察者模式)
  * handles: 
  * on: 订阅事件
  * emit: 发布事件
  * off: 删除事件
 **/
class PubSub {
  constructor() {
    this.handles = {} // 事件处理函数集合
  }
  //订阅事件
  on(eventType, handle) {
    if (!this.handles.hasOwnProperty(eventType)) {
      this.handles[eventType] = []
    }
    if (typeof handle == 'function') {
      this.handles[eventType].push()
    } else {
      throw new Error('缺少回调函数')
    }
    return this;
  }
  // 发布事件
  emit(eventType, ...args) {
    if (this.handles.hasOwnProperty(eventType)) {
      this. Handles[eventType].forEach((item, key, arr) => {
        item.apply(null, args)
      })
    } else {
      throw new Error(`"${eventType}"事件未注册`)
    }
    return this;
  }
  // 删除事件
  off(eventType, handle) {
    if (!this.handles.hasOwnProperty(eventType)) {
      throw new Error(`"${eventType}"事件未注册`)
    } else if (typeof handle != 'function') {
      throw new Error('缺少回调函数')
    } else {
      this.handles[eventType].forEach((item, key, arr) => {
        if (item == handle) {
          this.handles[eventType].splice(key, 1)
        }
      })
    }
    return this;
  }
}
let pubsub = new PubSub();
function callback() {
  console.log('you are so nice')
}
// 订阅:如下在事件eventTypeName上添加了两个回调
pubsub.on('eventTypeName', (...args) => {
  console.log(args.join(' '))
}).on('eventTypeName', callback)
// 发布：
pubsub.emit('eventTypeName', 'whar', 'a', 'fucking day'); //发布 依次执行 eventTypeName 事件中的 所以方法
pubsub.off('eventTypeName', callback)  // 删除只是删除 eventTypeName 事件的 callback 方法
pubsub.emit('eventTypeName', 'fucking', 'again')
/*
  输出值：
  what a fucking day
  you are so nice
  fucking again
*/

 总结：   发布—订阅模式的优点非常明显，一为时间上的解耦，二为对象之间的解耦。它的应用非常广泛，既可以   用在异步编程中，也可以帮助我们完成更松耦合的代码编写。发布—订阅模式还可以用来帮助实现一些别   的设计模式，比如中介者模式。从架构上来看，无论是 MVC 还是 MVVM， 都少不了发布—订阅模式的参   与，而且JavaScript本身也是一门基于事件驱动的语言。   当然，发布—订阅模式也不是完全没有缺点（浪费内存）。创建订阅者本身要消耗一定的时间和内存，   而且当你订阅一个消息后，也许此消息最后都未发生，但这个订阅者会始终存在于内存中。另外，发   布—订阅模式虽然可以弱化对象之间的联系，但如果过度使用的话，对象和对象之间的必要联系也将被   深埋在背后，会导致程序难以跟踪维护和理解。特别是有多个发布者和订阅者（b订阅a的消息并发布   给c）嵌套到一起的时候，要跟踪一个bug不是件轻松的事情。