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 ...
随机推荐
- 可运行jar包生成步骤和jar包的生成
一.可运行jar包生成步骤 1.进入.class文件所在目录,新建一个记事本文件,假设为1.txt,文件内容: 1> Main-Class:可运行类的名字 ( 例如:Main-Class:T ...
- SPRING IN ACTION 第4版笔记-第十一章Persisting data with object-relational mapping-001-使用Hibernate(@Inject、@EnableTransactionManagement、@Repository、PersistenceExceptionTranslationPostProcessor)
一.结构 二.Repository层 1. package spittr.db; import java.util.List; import spittr.domain.Spitter; /** * ...
- Mysql笔记——触发器简单实例
首先贴上触发器语法吧: CREATE TRIGGER <触发器名称> –触发器必须有名字,最多64个字符,可能后面会附有分隔符.它和MySQL中其他对象的命名方式基本相象. { BEFOR ...
- iOS CoreMotion框架(传感器)
我们知道iOS的应用真的太多了,很多应用让我们惊叹不已!!!很多意想不到的应用! 比如: 1.电子罗盘指南针之类的应用-让我们知道方向. 2.运动类型软件-让我们知道我们跑步多少公里. 3.社交软件中 ...
- 294. Flip Game II
题目: You are playing the following Flip Game with your friend: Given a string that contains only thes ...
- VNC+SSH相关应用
1.安装vnc-server vncviewer2.执行vncserver 输入密码3.执行vncserver -kill :1 杀死1号屏幕4.修改/root/.vnc/xstartup u ...
- android:screenOrientation的说明 固定屏幕显示方向
Activity在屏幕当中显示的方向.属性值可以是下表中列出的一个值: "unspecified" 默认值,由系统来选择方向.它的使用策略,以及由于选择时特定的上下文环境,可能会因 ...
- UVa 10154 - Weights and Measures
UVa 10154 - Weights and Measures I know, up on top you are seeing great sights, But down at the bot ...
- vim 添加到右键 windows
>>>> 在windows下 <<<< ++ 在鼠标右键显示“用vim编辑”++ 1.删掉注册表中的HKEY_CLASSES_ROOT\*\shelle ...
- MySQL 字段常用操作 添加,修改,删除,调整字段顺序
整理备忘: 添加字段:alter table 表名Add column 字段名 字段类型 默认值 AFTER 字段名 (在哪个字段后面添加) 例子: alter table appstore_sou ...