JavaScript 观察者模式(发布订阅)原理与自定义实现

作者:小括号时间:2026-10-22 01:58:48浏览:531

本文详解 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 程序设计的介绍能对读者有所帮助。

作者最新文章