PubSub的一种实现
今天在浏览JavaScript事件时,复习了下Dean Edward大神的addEvent。突然觉得可以基于他的思路实现一个结构更好的PubSub。
思路也很简单,就是要维护一个类似如下的一个仓库结构:
/*
{
'sayHello': {
0: fn0,
1: fn1,
//... },
'sayGoodBye': {
0: fnn,
//...
},
//...
}*/
下面是我的实现代码:
(function(exports) {
var PubSub = exports.PubSub || {}; //在PubSub对象上增加静态域PubSubCache,用于保存subscribe相关数据 /**
* PubSub.PubSubCache仓库结构
* {
* 'sayHello': {
* 0: fn0,
* 1:fn1,
* //..。
* },
* 'sayGoodBye': {
* //...
* }
* }
*
*/
PubSub.PubSubCache = PubSub.PubSubCache || {$uid: 0}; //PubSub有4个静态方法:subscribe, subscribeOne, unsubscribe, publish
//PubSub不会与DOM元素有关系。这样publish也只能手动去触发了
PubSub.subscribe = function(type, handler) {
var cache = this.PubSubCache[type] || (this.PubSubCache[type] = {});
handler.$uid = handler.$uid || this.PubSubCache.$uid++; //把回调放入仓库中
cache[handler.$uid] = handler;
}; PubSub.unsubscribe = function(type, handler) {
var counter = 0,$type, cache = this.PubSubCache[type]; if(arguments.length === 1) {
//直接删除此种类型的订阅对象
if(!cache) return true;
return !!this.PubSubCache[type] && (delete this.PubSubCache[type]);
} else if(arguments.length === 2) {
!!this.PubSubCache[type] && (delete this.PubSubCache[type][handler.$uid]);
} //PubSubCahe仓库中某类型订阅为空,则要删除这个订阅对象
for($type in cache) {
counter++;
} return !counter && (delete this.PubSubCache[type]);
}; PubSub.publish = function(type) {
var cache = this.PubSubCache[type], key, oneFlag, tmp, context, args = [].slice.call(arguments); if(!cache) return; if(args.length === 1) {
context = exports;
} else {
context = args[1];
} //执行回调
for(key in cache) {
tmp = cache[key];
//在发布消息时可以指定回调函数的上下文,同时还可以传入参数
cache[key].apply(context, args.slice(1));
tmp.one && this.unsubscribe(type, tmp);
}
}; PubSub.subscribeOne = function(type, handler) {
this.subscribe(type, handler);
//给函数加一个只执行一次的标志
handler.one = true;
}; exports.PubSub = PubSub;
})(window);
下面是测试代码:
var data = {name: 'haha', age:18}; var handler2 = function(data) {
console.log('say.hello excuted! 2');
console.log(this.name);
}; //订阅say.hello消息
PubSub.subscribe('say.hello', function(data) {
console.log('say.hello excuted! 1');
}); //第二次订阅say.hello消息
PubSub.subscribe('say.hello', handler2); //第三次订阅say.hello消息
PubSub.subscribe('say.hello', function(data) {
console.log('say.hello excuted! 3');
console.log(this.age);
}); //第四次增加一个只会执行一次的say.hello消息订阅
PubSub.subscribeOne('say.hello', function(data) {
console.log('say.hello excuted! one');
}); /**
* 发布say.hello消息类型
* 输出:
* say.hello excuted! 1
* say.hello excuted! 2
* haha
* say.hello excuted! 3
* 18
* say.hello excuted! one
*/ PubSub.publish('say.hello', data); //取消第二次订阅的say.hello类型
PubSub.unsubscribe('say.hello', handler2); /**
* 发布say.hello消息类型
* 输出:
* say.hello excuted! 1
* say.hello excuted! 3
* 18
*/ console.log('--------------------------------')
PubSub.publish('say.hello', data); /**
* 再次发布say.hello消息,不过这次除了传入执行上下文外,还要传入参数
* 输出:
* say.hello excuted! 1
* say.hello excuted! 3
* 18
* say.hello excuted! has deliverd args
* args123
*/ PubSub.subscribe('say.hello', function(data, args) {
console.log('say.hello excuted! has deliverd args');
console.log(args);
}); console.log('--------------------------------')
PubSub.publish('say.hello', data, 'args123');
小结:
全局的PubSub对象有四个方法:
1. subscribe(type, handler) :增加一种类型的消息订阅。类似jQuery的bind();
2. subscribeOne(type, handler):增加一种回调只会执行一次的消息订阅,类似jQuery的one()
3. unsubscribe(type, [handler]): 如果只传type,会删除所有的type消息订阅;传入了回调函数,则只删除那一个回调。类似jQuery的unbind()
4. publish(type):执行订阅。类似jQuery的trigger();
当然上面的功能Cowboy大神只用了只行代码就实现了(基于jQuery):
(function($) {
//得到一个jQuery对象,以便使用其方法
var o = $({}); //为jQuery对象增加静态的方法
$.subscribe = function() {
o.bind.apply(o, arguments);
}; $.unsubscribe = function() {
o.unbind.apply(o, arguments);
}; $.publish = function() {
o.trigger.apply(o, arguments);
} })(jQuery);
PubSub的一种实现的更多相关文章
- GCP消息队列Pubsub详解,简单好用还不用自己运维
我最新最全的文章都在南瓜慢说 www.pkslow.com,欢迎大家来喝茶! 1 简介 GCP的Pubsub是一种异步消息传递服务,可将生产事件的服务与处理事件的服务隔离开.消息队列的作用就不多作介绍 ...
- Redis info参数总结(转)
Redis官网对 info 已经讲解的比较清楚的,参考文档 . 可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一 ...
- 关于Redis info的参数总结
Redis官网对 info 已经讲解的比较清楚的,参考文档 .可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一块 ...
- (转)基于即时通信和LBS技术的位置感知服务(一):提出问题及解决方案
一.前言.提出问题 公司最近举行2011年度创新设计大赛,快年底了正打算写写2010年以来Android开发的心得与经验,正好同事出了个点子:假如A和B两个人分别在不同的地点,能不能实现这样的功能,让 ...
- redis info命令结果释疑
redis的性能数据这块用 info 命令就可以获取的比较全面了,下面是对info信息返回值的解释: # 参考:http://redis.io/commands/info # # # Server r ...
- vue的组件详解
什么是组件 组件(Component)是 Vue.js 最强大的功能之一.(好比电脑中的每一个元件(键盘,鼠标,CPU),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行互相融合,变 ...
- Redis info参数总结
可以看到,info的输出结果是分几块的,有Servers.Clients.Memory等等,通过info后面接这些参数,可以指定输出某一块数据. 下面是针对info的输出在旁边注释了,因为对Redis ...
- JMS学习之理论基础
本文代码使用ActiveMq5.6 一.什么是JMS JMS(Java Message Service,Java消息服务)是一组Java应用程序接口(Java API),它提供创建.发送.接收.读取消 ...
- 组件通信之全局事件总线 & 消息订阅发布
全局事件总线 介绍 一种组件间通信的方式,适用于任意组件间通信. 在使用全局事件总线之前需要一些知识准备 所有组件实例的原型对象的原型对象就是 Vue 的原型对象,即VueComponent.prot ...
随机推荐
- 2016CVTE编程题:兔子藏洞
兔子藏洞 题目描述 一只兔子藏身于20个圆形排列的洞中(洞从1开始编号),一只狼从x号洞开始找,下次隔一个洞找(及在x+2号洞找),在下次个两个洞找(及在x+5号洞找),以此类推...它找了n次仍然没 ...
- python urllib2的proxyhandler
1. 再a方法中新建了个opener,使用了代理: proxydict = {} proxydict['http'] = "http://%s:%s"%(ip,port) #pri ...
- 做个简单的Android列表字母索引控件
相信大家在许多App中都见到过带字母索引的界面,比如我最近看到的这个开源控件: WaveSideBar 很酷是不是?!!!如果加在例如联系人列表界面上,大大提升了用户体验. 那么这个索引控件要怎么做呢 ...
- Android百度地图开发01之初体验
做关于位置或者定位的app的时候免不了使用地图功能,本人最近由于项目的需求需要使用百度地图的一些功能,所以这几天研究了一下,现写一下blog记录一下,欢迎大家评论指正! 一.申请AK(API Key) ...
- swift:入门知识之枚举和结构体
枚举: swift中的枚举有些类似于类这个概念,它有自己的属性,也可以有自己的方法 枚举中的成员有原始值和实际值之分,原始值用来枚举成员的排序次序,默认从0开始 枚举出来的成员值就是实际值 可以通过t ...
- Android 消息广播Intent传递数据
1.创建布局文件activity_broadcast.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk ...
- Python ->> 第一个Python程序
#coding:utf-8 #print 'input your name, please' #name = raw_input('请输入你的名字:'.decode('utf-8').encode(' ...
- SSIS ->> Reliability And Scalability
Error outputs can obviously be used to improve reliability, but they also have an important part to ...
- TEET
[{"PROCESS_STORE_TIME":"3min 11s","PROCESS_GET_FILE_TIME":"3min&q ...
- Java基础复习之二:运算符,键盘录入,流程控制语句,if语句,三元运算
1.运算符 1.1.算术运算符 +(加法有三个用法:加法,正号,字符串连接符) - * / % ++ -- 1.1.1./ 是取商,%是取余 1.1.2.++ 与--的用法(a:作用是自 ...