美文网首页
发布订阅模式

发布订阅模式

作者: 209bd3bc6844 | 来源:发表于2017-06-12 14:55 被阅读0次

    生活中的发布订阅

    淘宝卖家属于发布者。顾客小红等一群吃瓜群众是订阅者。群众订阅淘宝卖家的店铺,卖家有新消息就会通知所有人。

    发布订阅模式的优点

    1. 支持简单的广播通信,当对象状态发生改变时,会自动通知已经订阅过的对象。
      比如上面的列子,小明,小红不需要天天逛淘宝网看鞋子到了没有,在合适的时间点,发布者(卖家)来货了的时候,会通知该订阅者(小红,小明等人)。

    2. 发布者与订阅者耦合性降低,发布者只管发布一条消息出去,它不关心这条消息如何被订阅者使用,同时,订阅者只监听发布者的事件名,只要发布者的事件名不变,它不管发布者如何改变;同理卖家(发布者)它只需要将鞋子来货的这件事告诉订阅者(买家),他不管买家到底买还是不买,还是买其他卖家的。只要鞋子到货了就通知订阅者即可。

    简易版发布订阅代码

    const shoeObj = {};// 定义发布者
    shoeObj.list = {};// 缓存列表 存放订阅者回调函数
    // 增加订阅者
    shoeObj.listen = function listen(key, fn) {
      if (Array.isArray(shoeObj.list[key])) {
        shoeObj.list[key].push(fn);
      } else {
        shoeObj.list[key] = [fn];
      }
    };
    // 发布消息
    shoeObj.trigger = function trigger() {
      const key = Array.prototype.shift.call(arguments); // 取出消息类型名称
      const fns = this.list[key];  // 取出该消息对应的回调函数的集合
    // 如果没有订阅过该消息的话,则返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++]; ) {
            fn.apply(this,arguments); // arguments 是发布消息时附送的参数
        }
    };
    // 小红订阅如下消息
    shoeObj.listen('red',function(size){
        console.log("尺码是:"+size);  
    });
    
    // 小花订阅如下消息
    shoeObj.listen('block',function(size){
        console.log("再次打印尺码是:"+size); 
    });
    shoeObj.trigger("red",40);
    shoeObj.trigger("block",42);
    

    代码封装

    我们知道,对于上面的代码,小红去买鞋这么一个对象shoeObj 进行订阅,但是如果以后我们需要对买房子或者其他的对象进行订阅呢,我们需要复制上面的代码,再重新改下里面的对象代码;为此我们需要进行代码封装;

    const event = {
      list: {},
      listen:  function listen(key, fn) {
        if (Array.isArray(this.list[key])) {
          this.list[key].push(fn);
        } else {
          this.list[key] = [fn];
        }
      };
      trigger: function trigger() {
        const key = Array.prototype.shift.call(arguments); // 取出消息类型名称
        const fns = this.list[key];  // 取出该消息对应的回调函数的集合
      // 如果没有订阅过该消息的话,则返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++]; ) {
            fn.apply(this,arguments); // arguments 是发布消息时附送的参数
        }
      };
      
    };
    

    我们在定义一个initEvent函数,这个函数使所有的普通对象都具有发布订阅功能,如下代码:

    var initEvent = function(obj) {
        for(var i in event) {
            obj[i] = event[i];
        }
    };
    
    
    取消订阅
    event.cancel = function(key, fn){
     //     如果存在该类型的消息
          if(event.list[key] instanceof Array){
              var i = event.list[type].length -1;
      // 遍历通知方法
              for(; i >= 0 ; i--){
      //     如果有通知该订阅者的方法,则移除
      //     &&的短路机制
     //     splice的三种功能(删除、替换、插入)之一
               event.list[type][i] === fn && event.list[type].splice(i,1);
               }
         }
    }
    
    

    Javascript中理解发布--订阅模式

    观察者模式跟发布订阅模式1
    观察者模式跟发布订阅模式2
    这篇文章我说的 其实是观察者模式。
    在观察者模式中,观察者需要直接订阅目标事件;在目标发出内容改变的事件后,直接接收事件并作出响应
    在发布订阅模式中,发布者和订阅者之间多了一个发布通道;一方面从发布者接收事件,另一方面向订阅者发布事件;订阅者需要从事件通道订阅事件

    相关文章

      网友评论

          本文标题:发布订阅模式

          本文链接:https://www.haomeiwen.com/subject/rezkqxtx.html