发布订阅和观察者模式

发布订阅和观察者模式

发布订阅

转载https://www.cnblogs.com/chris-oil/p/8733249.html

• 发布—订阅模式又叫观察者模式，它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。

• 现实生活中的发布-订阅模式；

  比如小红最近在淘宝网上看上一双鞋子，但是呢 联系到卖家后，才发现这双鞋卖光了，但是小红对这双鞋又非常喜欢，所以呢联系卖家，问卖家什么时候有货，卖家告诉她，要等一个星期后才有货，卖家告诉小红，要是你喜欢的话，你可以收藏我们的店铺，等有货的时候再通知你，所以小红收藏了此店铺，但与此同时，小明，小花等也喜欢这双鞋，也收藏了该店铺；等来货的时候就依次会通知他们；

• 在上面的故事中，可以看出是一个典型的发布订阅模式，卖家是属于发布者，小红，小明等属于订阅者，订阅该店铺，卖家作为发布者，当鞋子到了的时候，会依次通知小明，小红等，依次使用旺旺等工具给他们发布消息；

• 发布订阅模式的优点：

  1. 支持简单的广播通信，当对象状态发生改变时，会自动通知已经订阅过的对象。

  比如上面的列子，小明，小红不需要天天逛淘宝网看鞋子到了没有，在合适的时间点，发布者(卖家)来货了的时候，会通知该订阅者(小红，小明等人)。

  2. 发布者与订阅者耦合性降低，发布者只管发布一条消息出去，它不关心这条消息如何被订阅者使用，同时，订阅者只监听发布者的事件名，只要发布者的事件名不变，它不管发布者如何改变

  同理卖家（发布者）它只需要将鞋子来货的这件事告诉订阅者(买家)，他不管买家到底买还是不买，还是买其他卖家的。只要鞋子到货了就通知订阅者即可。

  3. 对于第一点，我们日常工作中也经常使用到，比如我们的ajax请求，请求有成功(success)和失败(error)的回调函数，我们可以订阅ajax的success和error事件。我们并不关心对象在异步运行的状态，我们只关心success的时候或者error的时候我们要做点我们自己的事情就可以了~

• 发布订阅模式的缺点：

  1. 创建订阅者需要消耗一定的时间和内存。
  2. 虽然可以弱化对象之间的联系，如果过度使用的话，反而使代码不好理解及代码不好维护等等。

• 如何实现发布–订阅模式？

  1. 首先要想好谁是发布者(比如上面的卖家)。
  2. 然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者(比如上面的买家收藏了卖家的店铺，卖家通过收藏了该店铺的一个列表名单)。
  3. 最后就是发布消息，发布者遍历这个缓存列表，依次触发里面存放的订阅者回调函数。
  4. 我们还可以在回调函数里面添加一点参数，比如鞋子的颜色，鞋子尺码等信息；

• 我们先来实现下简单的发布-订阅模式；代码如下：

var shoeObj = {}; // 定义发布者
shoeObj.list = []; // 缓存列表 存放订阅者回调函数
        
// 增加订阅者
shoeObj.listen = function(fn) {
    shoeObj.list.push(fn);  // 订阅消息添加到缓存列表
}

// 发布消息
shoeObj.trigger = function(){
    for(var i = 0,fn; fn = this.list[i++];) {
        fn.apply(this,arguments); 
    }
}
// 小红订阅如下消息
shoeObj.listen(function(color,size){
    console.log("颜色是："+color);
    console.log("尺码是："+size);  
});

// 小花订阅如下消息
shoeObj.listen(function(color,size){
    console.log("再次打印颜色是："+color);
    console.log("再次打印尺码是："+size); 
});
shoeObj.trigger("红色",40);
shoeObj.trigger("黑色",42);

• 打印如上截图，我们看到订阅者接收到发布者的每个消息，但是呢，对于小红来说，她只想接收颜色为红色的消息，不想接收颜色为黑色的消息，为此我们需要对代码进行如下改造下，我们可以先增加一个key，使订阅者只订阅自己感兴趣的消息。

var shoeObj = {}; // 定义发布者
shoeObj.list = []; // 缓存列表 存放订阅者回调函数
        
// 增加订阅者
shoeObj.listen = function(key,fn) {
    if(!this.list[key]) {
        // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
        this.list[key] = []; 
    }
    this.list[key].push(fn);  // 订阅消息添加到缓存列表
}

// 发布消息
shoeObj.trigger = function(){
    var key = Array.prototype.shift.call(arguments); // 取出消息类型名称
    var 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);

• 可以看到，订阅者只订阅自己感兴趣的消息了
• 发布—订阅模式的代码封装

var event = {
    list: [],
    listen: function(key,fn) {
        if(!this.list[key]) {
            this.list[key] = [];
        }
        // 订阅的消息添加到缓存列表中
        this.list[key].push(fn);
    },
    trigger: function(){
        var key = Array.prototype.shift.call(arguments);
        var fns = this.list[key];
        // 如果没有订阅过该消息的话，则返回
        if(!fns || fns.length === 0) {
            return;
        }
        for(var i = 0,fn; fn = fns[i++];) {
            fn.apply(this,arguments);
        }
    }
};
// 我们在定义一个initEvent函数，这个函数使所有的普通对象都具有发布订阅功能，如下代码：
var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};
// 我们再来测试下，我们还是给shoeObj这个对象添加发布-订阅功能；
var shoeObj = {};
initEvent(shoeObj);

// 小红订阅如下消息
shoeObj.listen('red',function(size){
    console.log("尺码是："+size);  
});

// 小花订阅如下消息
shoeObj.listen('block',function(size){
    console.log("再次打印尺码是："+size); 
});
shoeObj.trigger("red",40);
shoeObj.trigger("block",42);

• 如何取消订阅事件？
  比如上面的列子，小红她突然不想买鞋子了，那么对于卖家的店铺他不想再接受该店铺的消息，那么小红可以取消该店铺的订阅。

event.remove = function(key,fn){
    var fns = this.list[key];
    // 如果key对应的消息没有订阅过的话，则返回
    if(!fns) {
        return false;
    }
    // 如果没有传入具体的回调函数，表示需要取消key对应消息的所有订阅
    if(!fn) {
        fn && (fns.length = 0);
    }else {
        for(var i = fns.length - 1; i >= 0; i--) {
            var _fn = fns[i];
            if(_fn === fn) {
                fns.splice(i,1); // 删除订阅者的回调函数
            }
        }
    }
};
// 测试
var initEvent = function(obj) {
    for(var i in event) {
        obj[i] = event[i];
    }
};
var shoeObj = {};
initEvent(shoeObj);

// 小红订阅如下消息
shoeObj.listen('red',fn1 = function(size){
    console.log("尺码是："+size);  
});

// 小花订阅如下消息
shoeObj.listen('red',fn2 = function(size){
    console.log("再次打印尺码是："+size); 
});
shoeObj.remove("red",fn1);
shoeObj.trigger("red",42);

• 全局封装

var Event = (function(){
    var list = {},
          listen,
          trigger,
          remove;
          listen = function(key,fn){
            if(!list[key]) {
                list[key] = [];
            }
            list[key].push(fn);
        };
        trigger = function(){
            var key = Array.prototype.shift.call(arguments),
                 fns = list[key];
            if(!fns || fns.length === 0) {
                return false;
            }
            for(var i = 0, fn; fn = fns[i++];) {
                fn.apply(this,arguments);
            }
        };
        remove = function(key,fn){
            var fns = list[key];
            if(!fns) {
                return false;
            }
            if(!fn) {
                fns && (fns.length = 0);
            }else {
                for(var i = fns.length - 1; i >= 0; i--){
                    var _fn = fns[i];
                    if(_fn === fn) {
                        fns.splice(i,1);
                    }
                }
            }
        };
        return {
            listen: listen,
            trigger: trigger,
            remove: remove
        }
})();
// 测试代码如下：
Event.listen("color",function(size) {
    console.log("尺码为:"+size); // 打印出尺码为42
});
Event.trigger("color",42);

• 理解模块间通信
  我们使用上面封装的全局的发布-订阅对象来实现两个模块之间的通信问题；比如现在有一个页面有一个按钮，每次点击此按钮后，div中会显示此按钮被点击的总次数；如下代码：

doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  <script src="global.js">script>
 head>
 <body>
    <button id="count">点将我button>
    <div id="showcount">div>
    <script src = "a.js">script>
    <script src = "b.js">script>
 body>
html>

我们中的a.js 负责处理点击操作 及 发布消息；如下JS代码：

var a = (function(){
    var count = 0;
    var button = document.getElementById("count");
    button.onclick = function(){
        Event.trigger("add",count++);
    }
})();

b.js 负责监听add这个消息，并把点击的总次数显示到页面上来；如下代码：

var b = (function(){
    var div = document.getElementById("showcount");
    Event.listen('add',function(count){
        div.innerHTML = count;
    });
})();

如上代码，当点击一次按钮后，showcount的div会自动加1，如上演示的是2个模块之间如何使用发布-订阅模式之间的通信问题；

其中global.js 就是我们上面封装的全局-发布订阅模式对象的封装代码

发布订阅与观察者的区别

• 发布订阅模式属于广义上的观察者模式
  • 发布订阅模式是最常用的一种观察者模式的实现，并且从解耦和重用角度来看，更优于典型的观察者模式
  • 发布订阅模式多了个事件通道,在观察者模式中，观察者需要直接订阅目标事件；在目标发出内容改变的事件后，直接接收事件并作出响应

╭─────────────╮  Fire Event  ╭──────────────╮
│             │─────────────>│              │
│   Subject   │              │   Observer   │
│             │<─────────────│              │
╰─────────────╯  Subscribe   ╰──────────────╯

• 在发布订阅模式中，发布者和订阅者之间多了一个发布通道；一方面从发布者接收事件，另一方面向订阅者发布事件；订阅者需要从事件通道订阅事件以此避免发布者和订阅者之间产生依赖关系

╭─────────────╮                 ╭───────────────╮   Fire Event   ╭──────────────╮
│             │  Publish Event  │               │───────────────>│              │
│  Publisher  │────────────────>│ Event Channel │                │  Subscriber  │
│             │                 │               │<───────────────│              │
╰─────────────╯                 ╰───────────────╯    Subscribe   ╰──────────────╯

• 观察者和被观察者，是松耦合的关系

• 发布者和订阅者，则完全不存在耦合-解耦

• 观察者模式，也属于行为型模式的一种，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。

• 注意：有些人认为观察者模式就是发布订阅模式，但实际上观察者模式和发布订阅模式是有区别的。

  • 区别：观察者模式只有两个，一个是观察者一个是被观察者。
  • 发布订阅模式不一样，发布订阅模式还有一个消息管道，发布订阅模式的实现是，发布者通知给消息管道 => 消息管道接受并通知订阅者 => 订阅者收到通知并发生变化

• 举一个简单的例子：我们曾经在DOM节点上面绑定过事件函数，那我们就使用过观察者模式，因为JS和DOM之间就是实现了一种观察者模式。

  document.body.addEventListener("click", function() {
      alert("Hello World")
  }，false )
  document.body.click() //模拟用户点击
  

  以上js就是观察者，DOM就是被观察者，给DOM添加点击事件就相当于订阅了DOM,当DOM被点击，DOM就会通知js触发‘ alert(“Hello World”) ’

• 在实际项目中，我们所用的vue框架就采用了这种观察者模式的思想，下面我们模仿一下vue的v-model双向绑定的实现：

  // 创建对象
  var targetObj = {
      name:'小李'
  }
  var targetObj2 = {
      name:'小李'
  }
  // 定义值改变时的处理函数（观察者）
  function observer(oldVal, newVal) {
      // 其他处理逻辑...
      targetObj2.name = newVal
      console.info('targetObj2的name属性的值改变为 ' + newVal);
  }
  
  // 定义name属性及其set和get方法（name属性为被观察者）
  Object.defineProperty(targetObj, 'name', {
      enumerable: true,
      configurable: true,
      get: function() {
          return name;
      },
      set: function(val) {
          //调用处理函数
          observer(name, val)
          name = val
      }
  });
  
  targetObj.name = '张三';
  targetObj.name = '李四';
  console.log(targetObj2.name)
  

• Observer模式的角色

  • Subject（被观察者）
    被观察的对象。当需要被观察的状态发生变化时，需要通知队列中所有观察者对象。Subject需要维持（添加，删除，通知）一个观察者对象的队列列表。
  • Observer（观察者）
    接口或抽象类。当Subject的状态发生变化时，Observer对象将通过一个callback函数得到通知。