博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
pub/sub的实际应用总结
阅读量:5049 次
发布时间:2019-06-12

本文共 2230 字,大约阅读时间需要 7 分钟。

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

 

转载于:https://www.cnblogs.com/mengff/p/8144463.html

你可能感兴趣的文章
面向对象1
查看>>
在ns2.35中添加myevalvid框架
查看>>
【贪心+DFS】D. Field expansion
查看>>
为什么要使用href=”javascript:void(0);”
查看>>
二进制文件的查看和编辑
查看>>
C# Async与Await的使用
查看>>
Mysql性能调优
查看>>
iOS基础-UIKit框架-多控制器管理-实例:qq界面框架
查看>>
javascript学习---BOM
查看>>
IOS-每个程序员的编程之路上都应该看这11本书
查看>>
自定义tabbar(纯代码)
查看>>
extjs fieldset 和 radio
查看>>
小程序底部导航栏
查看>>
Codeforces Gym101505G:Orchard Division(扫描线+线段树第k大)
查看>>
ibatis学习笔记
查看>>
18-ES6(1)
查看>>
poj1611 简单并查集
查看>>
tensorflow实现迁移学习
查看>>
Ubuntu 14.04下安装CUDA8.0
查看>>
跨平台开发 -- C# 使用 C/C++ 生成的动态链接库
查看>>