订阅模式

  • 发布订阅模式或消息模式

    • 这种模式一般会定义一个主体和众多的主体，这里主体可以想象为一个消息中心，里面有各种各样的消息，众多的个体可以订阅不同的消息，当未来消息中心发布某条信息的时候，订阅过他的个体就会得到通知。 ```javascript // 定义一个消息中心 var msgCenter = (function(){ var _msg = {}; // 存储消息 /*

      1.  var _msg = {
      2.  'carInfo': [person1.alreadRegister.carInfo,
      3.                        person2.alreadRegister.carInfo],

      ‘newsInfo’: [person1.alreadRegister.newsInfo,

      1.                         person3.alreadRegister.newsInfo]

      } */ return { // 用于订阅一个消息 register: function(type, fn) { if(_msg[type]) {

      1.  _msg[type].push(fn);

      }else {

      1.  _msg[type] = [fn];

      } }, // 用于发布消息 fire: function(type, args) { if(!_msg[type]) { return ;} let event = {

      1.  type,

      args: args || {} } _msg[type].forEach(item => {

      1.   item(event);

      })

      }, // 用于取消订阅消息 cancel: function(type, fn) { if(!_msg[type]) { return ;}

      1.    for(let i = 0;i < _msg[type].length; i++) {
      2.  if(_msg[type][i] === fn) {
      3.    _msg[type].splice(i, 1);
      4.  break;

      } } } } })();

function Person() { this.alreadyRegister= {}; // 存个体已经订阅过的消息 } Person.prototype.register = function(type, fn) { if(this.alreadyRegister[type]) { console.log(“你已经订阅过这个消息了，请不要重复订阅”); }else { msgCenter.register(type, fn); this.alreadyRegister[type] = fn;
} } Person.prototype.cancel = function(type) { msgCenter.cancel(type, this.alreadyRegister[type]); delete this.alreadyRegister[type]; }

var person1 = new Person(); var person2 = new Person(); var person3 = new Person();

person1.register(‘carInfo’, function(e) { console.log(“person1得到了关于” + e.type + ‘的消息，消息内容是：’ + e.args.info) }); person1.register(‘newsInfo’, function(e) { console.log(“person1得到了关于” + e.type + ‘的消息，消息内容是：’ + e.args.info) }); person2.register(‘carInfo’, function(e) { console.log(“person2得到了关于” + e.type + ‘的消息，消息内容是：’ + e.args.info) }); person3.register(‘newsInfo’, function(e) { console.log(“person3得到了关于” + e.type + ‘的消息，消息内容是：’ + e.args.info) });

msgCenter.fire(‘carInfo’, {info: ‘新款汽车上市’}); msgCenter.fire(‘newsInfo’, {info: ‘林俊杰又发新歌了’}); ``` image.png