大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全家桶1年46,售后保障稳定
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 ,感兴趣的同学可以去了解下。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/219124.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...