使用原生JavaScript实现的EventEmitter

最新推荐文章于 2024-06-15 20:07:44 发布
最新推荐文章于 2024-06-15 20:07:44 发布
阅读量6.4k 收藏 3
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yhjyumi/article/details/47363419
版权
这个博客介绍了如何使用纯JavaScript实现一个类似于Node.js中EventEmitter的功能，特别适合在浏览器环境中自定义事件。该实现还增加了定制事件触发次数的特性。源代码和测试代码可在提供的GitHub链接中查看，虽然当前为初步版本，但已包含前端测试文件和源代码，仍有待进一步优化。
摘要由CSDN通过智能技术生成

和Nodejs 中EventEmitter功能类似.适合浏览器自定义事件类.新添加了可以定制事件促发次数的功能.

详细见

https://github.com/webery/ajax/tree/master

包括了源代码和测试代码.未经过严格测试,暂时为第一个版本.还有很多优化的地方,现在只是一个参考.


使用方法

前端测试文件:emit.ejs

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
	<script type="text/javascript" src="/javascripts/eventemitter.js"></script>
  </head>
  <body>
    <input type="button" id="submit" value="click">
  </body>
  <script type="text/javascript">
     document.getElementById('submit').onclick = function() {
	 /*
	    var emit = new EventEmitter();
		
		emit.on('click', function() {
		  console.log('clcik');
		}, 2);
		emit.trigger('click'
最低0.47元/天 解锁文章
yhjyumi
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodeJS eventEmmite
yanlin_ma的博客
01-20 433
nodeJS eventsAPI摘要
如何简单使用JavaScript实现一个EventEmitter 包含on，once，off，emit
坠落清风
09-02 855
如何简单使用Javascript实现一个EventEmitter 包含on，once，off，emit 使用发布订阅者模式，简单实现，代码如下： class EventEmitter { constructor() { this.eventProcessingMap = new Map(); } emit(eventName, ...args) { if (!typeof eventName === "srting" || !typeof eventName === "symbo
js代码-eventEmmiter
07-14
js代码-eventEmmiter
Node.js中的事件发射器（Event Emitter）是什么，如何使用？
最新发布
有我更精彩的博客
06-15 787
Node.js 中的事件发射器是一种设计模式，它允许我们在某个事件发生时注册和触发回调函数。事件发射器模式（发布-订阅模式）被广泛用于异步编程中，这是因为它非常适合处理事件驱动的需求。在Node.js中，事件发射器是由events模块提供的，该模块提供了一个事件发射器EventEmitter）类，开发者可以使用它来发射和监听事件。在实际项目中，我们可能需要创建一个自定义类，并希望它具有事件发射器的能力。我们可以通过继承类来实现这一点。super();// 注册自定义事件监听器${
nodejs-EventEmitter
songmaolin_csdn的博客
10-19 477
在event模块中定义一个类EventEmitter类，所有的触发事件都集成该类。 emmiter.on(event,listener) emmiter.addListener(event,listener) 两个方法都是绑定事件 通过on可以绑定多个事件，但是不能超过emmiter.setMaxListenners(n) 设定的值。 emmiter.once(event,listene
Javascript-实现全局事件总线Event Bus/ Event Emitter
qq_42181069的博客
12-15 1704
自定义事件总线
JavaScript原生实现观察者模式的示例
10-18
本文将展示如何通过JavaScript原生代码实现观察者模式，并提供了一个PubSub（发布-订阅）类的实现。这个自定义类名为`PubSub`，它包含了`on`、`emit`、`off`三个主要方法，分别用于事件订阅、发布和取消订阅。 1. `...
EventEmitter:扩展的、跨平台的、向后兼容的 NodeJS 原生 EventEmitter 实现
06-17
扩展的跨平台，obratnosovmestimaya实现模块标准库NodeJS 。 附加 API 旨在提高代码的可用性和可读性。 为此，引入了以下机制： ## 与原版的区别： 标准事件： EventEmitter.MAX_LISTENERS = 10 默认情况下事件处理...
nodejs中简单实现Javascript Promise机制的实例
10-25
JavaScript Promise机制是前端开发...需要注意的是，Node.js自身也提供了原生的Promise支持，因此在生产环境中一般不需要手动实现Promise机制。然而，了解Promise的底层实现对于编写出更加健壮的异步代码是很有帮助的。
cordova-eventemitter-public
04-29
Cordova是一个流行的开源框架，用于构建原生移动应用，使用HTML、CSS和JavaScript。然而，原生Cordova并不直接支持Node.js的EventEmitter模式。通过`cordova-eventemitter-public`插件，开发者可以在Cordova应用中...
JS手写EventEmitter实现方式（每一行都有注释，保证小白也能看得懂）
冻书的博客
02-26 1446
class EventEmitter { constructor() { this._events = {} // 初始化events事件对象 } /** * 触发事件 * 原理：将该事件增加到该事件类型的队列中 * 状态：未执行 * @param event 事件名称 * @param cb 回调函数 */ on(event, cb) { const query = this._events[event] || [] // 获取原队列
EventEmitter:node.js的EventEmitter模块的事件模型源码-js
03-24
事件发射器 node.js的EventEmitter模块的事件模型源码 ================================================ 分析源码 1.外部（function（）{}）（window）为匿名函数，并插入的窗口 2.用var定义局部变量EventEmitter，并用函数表达式作为构造函数，最后window.EventEmitter = EventEmitter；引到窗口一行去。 当new EventEmitter（）的时候，构造函数的this.events在实例对象上。 3.实际用法是var e = new EventEmitter（）; e.on（evt，callback）或e.addListener（evt，callback）因为 EventEmitter.prototype.addListener = EventEmitter.proto
emit.js:JavaScript中的高效极简事件发射器
05-24
emit.js JavaScript中的高效极简事件发射器。 安装 它可以与bower或npm一起使用： bower install emit.js npm install emit.js 在HTML中包含emit.min.js ，并且在全局范围内现在可以使用emit对象： < script type =" text/javascript " src =" /path/to/bower_components/emit.js/dist/emit.min.js " > </ script > 或者，您可以使用模块管理器来避免全局作用域： var emit = require ( 'emit.js' ) ; // or es6 import import emit from 'emit.js' ; 用法 创建一个事件发射器 var emitter = emit ( ) ; 在上
手动实现一个eventEmitter
weixin_30591551的博客
01-31 283
观察者模式在前端开发中非常常用，我们经常用的事件就是观察者模式的一种体现。它对我们解耦模块、开发基于消息的业务起着非常重要的作用。Node.js 原生自带EventEmitter模块，可见它的重要性。 作为在工作中经常遇到和面试的经典题目当然要琢磨透彻，下面一步步手动写一个eventEmitter 首先，我们要知道EE的api是什么样的 node的Event...
EventEmitter简单实现
night snow 的博客
06-13 270
class EventEmitter { constructor () { // 选择map做储存结构，比一般对象更简洁 this._events = this._events || new Map(); this._maxListeners = this._maxListeners || 10; } // 触发事件 ...
EventEmitter
大灰狼的小绵羊哥哥的博客
07-07 917
实现一个EventEmitter类 class EventEmitter { constructor() { this._events = {} } on(eventName,callback) { let callbacks = eventName in this._events ? this._...
node 手动实现 EventEmitter 特别简单的思路
twinkle的博客
12-08 166
class MyEvent { constructor() { // 事件的数组 this.funcArray = []; } /** * 绑定事件 * @param funcName 事件名称 * @param cb 回调函数 */ on(funcName, cb) { this.funcArray.push({[funcName]: cb, funcName: funcName, o
Node.js —— EventEmitter
qq_53895518的博客
12-21 1664
序号方法描述1为指定事件添加一个监听器到监听器数组的尾部。2为指定事件注册一个监听器，接受一个字符串 event 和一个回调函数。');});3为指定事件注册一个单次监听器，即 监听器最多只会触发一次，触发后立刻解除该监听器。');});4移除指定事件的某个监听器，监听器必须是该事件已经注册过的监听器。它接受两个参数，第一个是事件名称，第二个是回调函数名称。');// ...5移除所有事件的所有监听器， 如果指定事件，则移除指定事件的所有监听器。
JS 的window.event事件-
BowenXu11的博客
04-06 455
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css" > ...
怎么样在nodejs中使用addEventListener
05-24
在 Node.js 中，addEventListener 不是原生的方法，因为它是浏览器 API 的一部分。如果你想在 Node.js 中使用类似于 addEventListener 的功能，你可以使用 Node.js 的内置事件模块 `events`。 下面是一个例子，演示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值