深入J*aScript_自定义事件系统_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

深入J*aScript_自定义事件系统

2025-11-21

浏览次数：次

返回列表

自定义事件系统是通过发布-订阅模式实现对象间解耦通信的机制，核心包括on、off、emit和once方法，可用于非DOM对象间的灵活消息传递，如购物车模块间通信，提升代码可维护性与扩展性。

深入javascript_自定义事件系统

在J*aScript中，自定义事件系统是一种强大的编程模式，它允许对象之间解耦通信。通过发布-订阅（Pub/Sub）机制，模块可以在不直接依赖彼此的情况下传递消息。这种模式广泛应用于前端框架、组件通信和状态管理中。掌握自定义事件系统，有助于构建更灵活、可维护的应用。

什么是自定义事件系统？

浏览器原生支持DOM事件，比如click、input等。但非DOM对象或业务逻辑之间也需要通信。自定义事件系统就是手动实现类似addEventListener和dispatchEvent的机制，让任意J*aScript对象可以监听和触发事件。

它的核心功能包括：

on：注册事件监听器
off：移除监听器
emit（或trigger）：触发事件并传递数据
once：绑定只执行一次的监听器

实现一个基础事件类

我们可以用一个简单的EventEmitter类来实现上述功能。使用对象存储事件名与回调函数列表的映射关系。

class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  }

  once(event, callback) {
    const wrapped = (...args) => {
      callback.apply(this, args);
      this.off(event, wrapped);
    };
    this.on(event, wrapped);
  }

  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(callback => {
        callback.apply(this, args);
      });
    }
  }

  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
}

这个类足够轻量，可用于组件间通信。例如，一个用户登录模块可以emit('login')，其他模块提前on监听该事件，收到通知后更新UI或请求数据。

实际应用场景举例

假设我们开发一个购物车系统，商品列表和总价显示是两个独立模块。使用事件系统可以让它们松耦合。

中国电子商务企业版

数据与动网论坛数据捆绑，动网论坛已经去掉上传组件，商城主体打了远程冰河等暴力攻击补丁功能：1 评论登陆审核很多免费版本不带的2 自定义搜索3 vip与会员分面板分权限4 多商家入驻分别发布商品下订单5 独有的域名主机系统更易操作用户名、密码均为admin

查看详情

const eventBus = new EventEmitter();

// 商品列表模块
function addItemToCart(item) {
  // 添加逻辑...
  eventBus.emit('itemAdded', item);
}

// 总价模块
eventBus.on('itemAdded', function(item) {
  console.log(`商品 ${item.name} 已加入，刷新总价`);
  // 更新计算逻辑
});

addItemToCart({ name: '笔记本', price: 5000 });

这样，商品列表不需要知道谁接收消息，总价模块也不依赖具体添加逻辑，便于测试和扩展。