JavaScript 观察者模式(发布订阅)原理与自定义实现
本文详解 JavaScript 中的观察者模式(发布订阅模式),阐述其一对多关系及解耦特性。通过对比 Node.js 原生 EventEmitter,提供完整的自定义 PubSub 类代码,涵盖 on、emit 和 off 方法的实现逻辑,帮助开发者深入理解事件驱动架构。
观察者模式概述
本文通过具体实例解析 JavaScript 中观察者模式(即发布/订阅模式)的核心原理与实现方式,供读者参考学习。
观察者模式,亦称发布订阅模式,定义了一种一对多的依赖关系。它允许多个观察者对象同时监听一个主题对象,当主题对象状态发生变化时,会自动通知所有注册的观察者。该模式由主题(Subject)和观察者(Observer)两类对象构成:主题负责发布事件,观察者通过订阅事件来监控主题。发布者和订阅者之间完全解耦,彼此无需知晓对方的存在,仅通过共享的自定义事件名称进行交互。
在 Node.js 环境中,EventEmitter 类提供了对该模式的原生支持。而在普通 JavaScript 开发中,事件监听机制本质上也可视为观察者模式的一种应用形式。
PubSub 代码实现
下文展示了一个自定义的 PubSub(发布订阅)实现代码。仔细研读该代码有助于深入理解观察者模式的工作机制。完整代码示例可参考 GitHub 仓库。
function PubSub() {
this.handlers = {};
}
PubSub.prototype = {
// 订阅事件
on: function(eventType, handler){
var self = this;
if(!(eventType in self.handlers)) {
self.handlers[eventType] = [];
}
self.handlers[eventType].push(handler);
return this;
},
// 触发事件(发布事件)
emit: function(eventType){
var self = this;
var handlerArgs = Array.prototype.slice.call(arguments,1);
for(var i = 0; i < self.handlers[eventType].length; i++) {
self.handlers[eventType][i].apply(self,handlerArgs);
}
return self;
},
// 删除订阅事件
off: function(eventType, handler){
var currentEvent = this.handlers[eventType];
var len = 0;
if (currentEvent) {
len = currentEvent.length;
for (var i = len - 1; i >= 0; i--){
if (currentEvent[i] === handler){
currentEvent.splice(i, 1);
}
}
}
return this;
}
};
var pubsub = new PubSub();
var callback = function(data){
console.log(data);
};
//订阅事件A
pubsub.on('A', function(data){
console.log(1 + data);
});
pubsub.on('A', function(data){
console.log(2 + data);
});
pubsub.on('A', callback);
//触发事件A
pubsub.emit('A', '我是参数');
//删除事件A的订阅源callback
pubsub.off('A', callback);
pubsub.emit('A', '我是第二次调用的参数');
运行上述代码后的输出结果如下图所示。

如需了解更多 JavaScript 相关知识,建议查阅本站相关专题,包括:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文关于 JavaScript 程序设计的介绍能对读者有所帮助。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
