pub/sub的实际应用总结

摘要:
以下是常见框架1的pub/sub模式实现的摘要。jquery 1.1的pub/sup实现直接注册事件。例如,要在窗口上注册自定义事件,因为jquery是一个事件支持命名空间,所以对pub/sub的支持更棒。“);参考http://api.jquery.com/jQuery.Callbacks/2.vue因为vue实例可以监听和发布事件,所以它可以充当EventBus,因此它可以直接实现pub/sub应用程序varbus=newVue();总线$在…上总线$发出当在vue组件中使用时,当组件被破坏时,事件应该被解除绑定。created(){this.$bus.$on;this.$bus;$on;},//在Destroy()之前清除事件侦听器{this.$bus.$off;this.$bus;$off;}当然,您也可以使用第三方总线实现来省去解除绑定和使用命名函数的麻烦,例如vue-happy总线。

pub/sub即观察者模式,有多重表现形式

1. Publisher/Subscriber
2. Observer/Observable
3. Listener(例如EventListener)
4. EventBus
5. EventEmitter

EventBus这种不只是观察者模式,还包含了中介者模式,bus就是一个中介者,负责在消费者和生产者之间转发消息
而Observer/Observable则是一种比较纯粹的观察者模式,一个对象要发布消息时候,就可以暴露一个Observable出来,
一个想要接收消息,找到这个Observalble并且Subscribe它。

下面总结常用框架自带的pub/sub模式实现

1. jquery的Pub/Sub实现

1.1 直接注册事件的方法进行

例如,在window上注册自定义事件,由于jquery是事件支持命名空间,对pub/sub的支持更加给力。

$(window).on('topic.eventType',function(event,data){

});

$(window).trigger('topic.eventType',[data]);

1.2 使用jquery的callbacks函数

jquery自带的callbacks系列函数,就是一个优质的pub/sub的实现,直接使用即可。

var topic = $.Callbacks();
topic.add(function () { ... });
topic.fire();

也可以进行简单的封装,使其更加自然:

var topics = {};
 
jQuery.Topic = function( id ) {
  var callbacks, method,
    topic = id && topics[ id ];
 
  if ( !topic ) {
    callbacks = jQuery.Callbacks();
    topic = {
      publish: callbacks.fire,
      subscribe: callbacks.add,
      unsubscribe: callbacks.remove
    };
    if ( id ) {
      topics[ id ] = topic;
    }
  }
  return topic;
};

// Subscribers
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );
 
// Publisher
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );

具体可以参考 http://api.jquery.com/jQuery.Callbacks/

2.vue的Pub/Sub实现

由于vue实例可以监听和发布事件,其可以充当一个EventBus,就可以直接实现一个pub/sub的应用

var bus = new Vue();
bus.$on('evnetType',function(data){

});
bus.$emit('evnetType',data);

具体在vue组件中使用时候,要在组件销毁时解绑事件。

created() {
  this.$bus.$on('evnet1', this.method1);
  this.$bus.$on('evnet2', this.method2);
},
// 清除事件监听
beforeDestroy () {
  this.$bus.$off('evnet1', this.method1);
  this.$bus.$off('evnet2', this.method2);
}

当然也可以使用第三方的bus实现,省去解除绑定和使用具名函数的麻烦,例如vue-happy-bus。
bus模式只是适用于简单的组件通信,复杂的通信还是使用vuex吧

3.Node.js的Pub/Sub实现

EventEmitter

emitter.on(event, listener) //注册一个事件

emitter.once(event, listener) //注册一个一次性的事件,触发后就被抹掉

emitter.removeListener(event, listener) //在时间队列中剔除某一个事件

emitter.removeAllListeners([event]) //删除整个事件队列,或多个事件

emitter.listeners(event) //返回某些事件 

emitter.emit(event, [arg1], [arg2], […]) //触发事件,可传入具体参数

在需要一些Pub/Sub实现,例如动画的执行时机在一个接口执行完之后,又需要在一个按钮点击之后,只是少量情况,但是又有需求,这种场合就非常合适。用框架自带的实现,省去了引入第三方包的麻烦。

免责声明:文章转载自《pub/sub的实际应用总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇[洛谷P3321][SDOI2015]序列统计分享一个递归无限级拼接Json的方法---ExtJs的TreePanel和TreeGrid均适用(Ef,Lambda,Linq,IQueryable,List)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

统一诊断服务 (Unified diagnostic services , UDS)

UDS由ISO-14229系列标准定义,ISO 14229-1 定义了诊断服务,不涉及网络及实现,只有应用层的内容。而ISO 14229-3则定义了UDS在CAN总线上的实现。 诊断通信的过程从用户角度来看非常容易理解,诊断仪发送诊断请求(request),ECU给出诊断响应(response),而UDS就是为不同的诊断功能的request和respons...

ES5和ES6对象导出和导入(转载,待整理)

1、import ... form...替代 require() //不接收对象 require:require('s.css'); //(es5) improt 's.css' //(es6) //接收对象 var o = require('s.js'); //es(5) import o form s.js //(es6) 2...

测试CPU速度

function CPUSpeed:Double; const DelayTime=500; var TimerHi,TimerLo:Dword; PriorityCals,Priority:Integer; begin PriorityClass :=GetPriorityClass(GetCurrentProcess); Priority :=GetT...

mysql查询最近12天的数据,没有数据自动补0

select a.date_time as dateTime,ifnull(b.order_num,'0.00') as orderNum, ifnull(b.payment_amount,'0.00') as paymentAmount from ( <include refid="all_date"/> ) a left join (...

程序破解之 API HOOK技术 z

API HOOK,就是截获API调用的技术,在程序对一个API调用之前先执行你的函数,然后根据你的需要可以执行缺省的API调用或者进行其他处理,假设如果想截获一个进程对网络的访问,一般是几个socket API : recv,recvfrom, send, sendto等等,当然你可以用网络抓包工具,这里只介绍通过API HOOK的方式来实现, 主要原理是...

一个word文档中,多个表格的批量调整(根据窗口调整表格和添加表格水平线)

Sub 自动调整所有表格() ' ' 自动调整所有表格 宏 ' 'Application.Browser.Target = wdBrowseTable For i = 1 To ActiveDocument.Tables.Count With ActiveDocument.Tables(i) .AutoFitBehavior (wdAuto...