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

一、概念

1、Observer模式的概念

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

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

好处：

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

2、Observer模式的角色

Subject（被观察者）

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

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

Observer（观察者）

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

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

二、应用场景

javascript 复制代码

<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>