设计模式-发布订阅模式

发布-订阅模式又叫观察者模式。它定义对象间的一种一对多的关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。在JavaScript开发中，我们一般用事件模型来替代传统的发布-订阅模式。

如何一步步实现发布-订阅模式

首先要指定好谁充当发布者。（比如售楼处）
然后给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者（售楼处的花名册）
最后发布消息的时候，发布者会遍历这个缓存列表，依次触发里面存放的订阅者回调函数（遍历花名册，挨个发消息）

简单实现如下

var salesOffice = {} // 定义售楼处
salesOffice.clientList = [] // 花名册，缓存列表，存放订阅者的回调函数
salesOffice.listen = function (fn) { // 添加订阅者
    this.clientList.push(fn) // 订阅的消息添加进缓存列表
}
salesOffice.trigger = function () { // 发布消息
    for (var i = 0, fn; fn = this.clientList[i++];) {
        fn.apply(this, arguments)
    }
}

简单的测试

// test
salesOffice.listen(function (prace,squareMeter) {
    console.log('价格：', prace);
    console.log('面积：', squareMeter);
})
salesOffice.trigger(2000000,110) //价格: 2000000 面积： 110

已经实现在最简易版的发布订阅，但其实是存在问题的，每个人可能订阅户型是不同的, 上面我们实现的是，只要一开始销售就通知所有订阅的人，显然是不合理的，将代码再来改写一下

var salesOffice = {}
salesOffice.clientList = {}
salesOffice.listen=function(key,fn){
  if(!this.clientList[key]){
    this.clientList[key]=[]
  }
  this.clientList[key].push(fn)
}
salesOffice.trigger=function(){
  arguments = Array.from(arguments)
  var key = arguments.shift()
  // var  key = Array.prototype.shift.call(arguments)
  fns=this.clientList[key]
  if(!fns||fns.length===0){
     return false
  }
  for(let i=0,fn;fn=fns[i++]){
    fn.apply(this,arguments)
  }
 
}
 
salesOffice.listen('squarterMetter80',function(price){
    console.log('squarterMetter80 价格：'+price)
})
salesOffice.listen('squarterMetter90',function(price){
    console.log('squarterMetter90价格：'+price)
})
 
salesOffice.trigger('squarterMeter80',8000)
 
salesOffice.trigger('squarterMeter90',9000)

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用？: 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。

提示下载完但解压或打开不了？: 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或联络我们.。

找不到素材资源介绍文章里的示例图片？: 对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。