Skip to content

Latest commit

 

History

History
69 lines (59 loc) · 1.99 KB

File metadata and controls

69 lines (59 loc) · 1.99 KB

二. 观察者模式

又被称为发布订阅模式,或者消息机制。定义了一种依赖关系,解决了主体对象和观察者之间功能的耦合

其实他就是定义了一种一对多的关系,让多个观察者对象同时监听某一个主体对象,这个主体对象的状态发生变化时,就会通知所有的观察者对象,使得他们能够自动更新自己。

观察者对象的好处:

  • 支持简单的广播通信,自动通知所有已经订阅过的对象。
  • 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
  • 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

演示

js 通过对观察者模式的实现是通过回调函数的方式

我们来先定义一个 pubsub 对象,其内部包含了 3 个方法:订阅、退订、发布

// 创建一个观察者
var Observe = (function() {
  var _message = {};
  return {
    register: function(type, fn) {
      //注册信息接口
      if (typeof _message[type] === 'undefined') {
        _message[type] = [fn];
      } else {
        _message[type].push(fn);
      }
    },
    fire: function(type, args) {
      //发布消息接口
      if (!_message[type]) return;
      //消息信息
      var event = {
          type: type,
          args: args || {}
        },
        i = 0,
        len = _message[type].length;
      for (; i < len; i++) {
        //一次执行注册过的方法
        _message[type][i].call(this, event);
      }
    },
    remove: function(type, fn) {
      //移除消息接口
      if (_message[type] instanceof Array) {
        var i = _message[type].length - 1;
        for (; i > -0; i--) {
          _message[type][i] === fn && _message[type].splice(i, 1);
        }
      }
    }
  };
})();

Observe.register('test', function(e) {
  console.log(e.type, e.args.msg);
});
Observe.register('test', function(e) {
  console.log(e.type, 'Liusixin');
});

Observe.fire('test', {
  msg: 'test test'
});