js设计模式5-观察者模式(发布-订阅)

发布—订阅模式又叫观察者模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

 1、原生DOM事件的订阅发布者模式。

    window.onload = function () {
      //body订阅/观察了一个‘点击’事件
      document.documentElement.addEventListener('click', function () {
        alert(2)
      }, false)
    }

上面的代码中，我们触发body的点击事件，会弹出2。这是我们最常见的发布订阅模式 

    document.documentElement.addEventListener('click', function () {
        alert(2);
      }, false);
      document.documentElement.addEventListener('click', function () {
        alert(3);
      }, false);
      document.documentElement.addEventListener('click', function () {
        alert(4);
      }, false);

使用这种方式注册事件，同一个元素的多个相同的DOM事件不会被覆盖 ,都会按注册的先后顺序触发。

 2、自定义的订阅发布者模式

需要具备的几个要素:

　   1、先要指定好谁充当发布者（比如售楼处）

　　2、然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名册）

　　3、最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数（遍历花名册，挨个发短信）

a.发布者   b.订阅者  c.发布者的事件存储器

var sales = {};//发布消息的销售
sales.clientList = [];  //缓存订阅者的回调函数

sales.listen = function (fn) { //增加订阅者
  this.clientList.push(fn)   //订阅的消息添加缓存列表
}

sales.trigger = function () {
  for (var i = 0, fn; fn = this.clientList[i++];) {
    fn.apply(this, arguments)
    console.log(i)
  }
}

sales.listen(function (price, squareMeter) {
  console.log('价格= ' + price)
  console.log('squareMeter= ' + squareMeter)
})

sales.listen(function (price, squareMeter) {
  console.log('价格= ' + price)
  console.log('squareMeter= ' + squareMeter)
})

sales.trigger(2000, 80)
sales.trigger(1000, 10)

 

结果出人意料，没有订阅的事件也被发布者发来了，就是所谓的垃圾信息。这里需要完善下，订阅了什么事件，就只接受什么信息。

var sales = {};//发布消息的销售
sales.clientList = [];  //缓存订阅者的回调函数

sales.listen = function (key, fn) { //增加订阅者
  //订阅的消息添加缓存列表
  if (!this.clientList[key]) {
    this.clientList[key] = []
  }
  this.clientList[key].push(fn)
}

sales.trigger = function () {
  var key = Array.prototype.shift.call(arguments);
  fns = this.clientList[key];
  if (!fns || fns.length === 0) {
    return false;
  }
  for (var i = 0, fn; fn = fns[i++];) {
    fn.apply(this, arguments)
  }
}
sales.listen('88Mteres', function (price) {
  console.log('价格===' + price)
})

sales.listen('110Mteres', function (price) {
  console.log('价格===' + price)
})


sales.trigger('88Mteres', 22000)
sales.trigger('110Mteres', 11000)

参考:https://www.cnblogs.com/xiaohuochai/p/8031564.html