前端PubSub模式简单实现
本文作者：IMWeb 邝伟科 原文出处：IMWeb社区 未经同意，禁止转载
PubSub是一种设计模式，中文叫发布订阅模式，简单来说就是消息发布者不直接向订阅者发布消息，而是发布到中介，而中介根据不同主题对消息进行过滤，并通知对该主题感兴趣的订阅者。该模式在前端现在很火的组件化开发十分常用，因为该模式松耦合，易于扩展的优点正式组件化开发所需要的。
一个PubSub模型主要方法有3个，订阅，退订，发布，下面尝试在前端实现一个最简单的PubSub模块。
var PubSub = {};
// 用于储存事件队列
var queue = {};
// 订阅接口
PubSub.on = function(event, cb) {
if (!queue[event]) {
queue[event] = [];
}
queue[event].push(cb);
};
// 退订接口
PubSub.off = function(event, cb) {
var currentEvent = queue[event];
var len = 0;
if (currentEvent) {
len = currentEvent.length;
for (var i = len - 1; i >= 0; i--) {
if (currentEvent[i] === cb) {
currentEvent.splice(i, 1);
}
}
}
};
// 发布接口
PubSub.emit = function(event) {
var currentEvent = queue[event];
if (currentEvent) {
for (var i = 0; i < currentEvent.length; i++) {
currentEvent[i]();
}
}
};使用：
// 订阅
var callbackA = function () {
console.log('event a happened')
};
PubSub.on('a', callbackA);
PubSub.on('b', function() {
console.log('event b happened')
});
// 退订 , 第二个参赛传入回调函数的引用
PubSub.off('a', callbackA);
// 发布
PubSub.emit('a');
PubSub.emit('b');当然，重复发明轮子的事情还是不要做了，前端目前已经有比较成熟的PubSub库，其中用的最多的应该eventemitter2，感兴趣的同学可以去了解下。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-12-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读