发布订阅模式（PubSub 以javascript的形式实现）

LeexMuller 发布于2019-08-26 10:41 / 1253人阅读

摘要：发布订阅模式事件发布订阅模式在异步编程中帮助我们完成更松的解耦甚至在的架构中以及设计模式中也少不了发布订阅模式的参与。

发布订阅模式

事件发布/订阅模式 (PubSub) 在异步编程中帮助我们完成更松的解耦, 甚至在 MVC、MVVC 的架构中以及设计模式中也少不了发布-订阅模式的参与。

优点: 在异步编程中实现更深的解耦

缺点: 如果过多的使用发布订阅模式, 会增加维护的难度

实现一个发布订阅模式

var Event = function() {
  this.obj = {}
}
Event.prototype.on = function(eventType,fn){
  if(!this.obj[eventType]) {
    this.obj[eventType]=[]
  }
   this.obj[eventType].push(fn) //这边方法函数放进去
}
Event.prototype.emit =function() {
 var eventType = Array.prototype.shift.call(arguments)
 var arr = this.obj[eventType]  //这边方法函数取出来
 for(let i =0;i
订阅函数逻辑一定要优先于发布函数吗
考虑以下场景:
$.ajax("", () => {
  // 异步订阅函数逻辑
})

// 在其他地方执行发布函数, 此时并不能保证执行发布函数的时候, 订阅函数已经执行
那么就应该这样做
  var Event = function () {
      this.obj = {}
      this.cacheList = []
    }
    Event.prototype.on = function (eventType, fn) {
      if (!this.obj[eventType]) {
        this.obj[eventType] = []
      }
      this.obj[eventType].push(fn)
      for (let i = 0; i < this.cacheList.length; i++) {
        this.cacheList[i]() //on中触发cacheList里面储存的函数
      }
    }
    Event.prototype.emit = function () {
      var arg = arguments
      var that = this

      function cache() {
        var eventType = Array.prototype.shift.call(arg)
        var arr = that.obj[eventType]
        for (let i = 0; i < arr.length; i++) {
          arr[i].apply(arr[i], arg)
        }

      }
      this.cacheList.push(cache) //emit触发的函数保存到cacheList中 
      //转交给on中去触发, 从而实现发布函数先于订阅函数执行
    }
    var ev = new Event()
    ev.emit("click", 5)  //这个使用的前提是 一定是先触发订阅  
    //然后等待 发布函数中的cacheList[i]()方法执行
    ev.on("click", function (a) {
      console.log(a)
    })

私有云服务器托管发布订阅模式订阅发布模式 DTS 订阅发布模式以数据形式存储在计算机中的信息数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106612.html

JavaScript设计模式与开发实践 - 观察者模式

摘要：发布者的状态发生变化时就会通知所有的订阅者，使得它们能够自动更新自己。观察者模式的中心思想就是促进松散耦合，一为时间上的解耦，二为对象之间的解耦。参考设计模式与开发实践第章发布订阅模式设计模式第章第节观察者模式概述观察者模式又叫发布 - 订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个目标对象（为了方便理解，以下将观察者对象叫...

xiangzhihong 2019-08-21 17:32 评论0 收藏0
观察者设计模式

摘要：定义观察者设计模式中有一个对象被称为根据观察者维护一个对象列表，自动通知它们对状态的任何修改。与观察者模式不同，它允许任何订阅者实现一个适当的事件处理程序来注册并接收发布者发布的主题通知。观察者设计模式是一个好的设计模式，这个模式我们在开发中比较常见，尤其是它的变形模式订阅/发布者模式我们更是很熟悉，在我们所熟悉jQuery库和vue.js框架中我们都有体现。我在面试中也曾经被问到o...

kviccn 2019-08-21 18:32 评论0 收藏0
JavaScript 设计模式（六）：观察者模式与发布订阅模式

摘要：观察者模式维护单一事件对应多个依赖该事件的对象关系发布订阅维护多个事件主题及依赖各事件主题的对象之间的关系观察者模式是目标对象直接触发通知全部通知，观察对象被迫接收通知。观察者模式（Observer）观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。简单点：女神有男朋友了，朋友圈晒个图，甜...

bingo 2019-08-23 18:36 评论0 收藏0
观察者模式与发布/订阅模式

摘要：观察者模式与发布订阅模式观察者模式概念一个被观察者的对象，通过注册的方式维护一组观察者对象。当被观察者发生变化，就会产生一个通知，通过广播的方式发送出去，最后调用每个观察者的更新方法。观察者模式与发布/订阅模式观察者模式概念一个被观察者的对象，通过注册的方式维护一组观察者对象。当被观察者发生变化，就会产生一个通知，通过广播的方式发送出去，最后调用每个观察者的更新方法。当观察者不...

tabalt 2019-08-26 13:47 评论0 收藏0
设计一个基于svg的涂鸦组件（一）

摘要：基于写了一个涂鸦组件，说项目之前先附上几张效果图项目地址由于篇幅问题，本文先总体介绍一下项目的大概情况，重点介绍一下组件间的通信方式。一项目说明该项目是基于构建的多页应用，使用开发，以组件的方式组织代码。基于svg写了一个涂鸦组件，说项目之前先附上几张效果图：项目地址：SVGraffiti showImg(https://segmentfault.com/img/bVbassI?w...

cartoon 2019-08-22 17:13 评论0 收藏0