最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 设计模式-发布订阅模式

    正文概述 掘金(低级前端开发_张老黑)   2021-05-13   421

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

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

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

    简单实现如下

    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,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元