原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html

需求

随着Browser客户端JS越来越复杂,MVC(Client端)设计模式成为一个很好的开发选择, 而MVC开发模式中,最基础的功能就是把Model和View关联起来, 当Model发生变化的时候,View呈现做出相应的调整。

实现此功能最合适的方式莫过于事件Event了, 对于Event大家应该都很熟悉,比如dom中的button,可以通过addEventListener/attachEvent添加click事件处理。

而一般的object对象是没有事件派发功能的,基于此需求,实现了一个EventEmitter。


/**
* Created by taozh on 2017/6/22.
* taozh1982@gmail.com
*/
var EventEmitter = function () {
this.__z_e_listeners = {};
};
EventEmitter.prototype.on = function (evt, handler, context) {
var handlers = this.__z_e_listeners[evt];
if (handlers === undefined) {
handlers = [];
this.__z_e_listeners[evt] = handlers;
}
var item = {
handler: handler,
context: context
};
handlers.push(item);
return item;
};
EventEmitter.prototype.off = function (evt, handler, context) {
var handlers = this.__z_e_listeners[evt];
if (handlers !== undefined) {
var size = handlers.length;
for (var i = 0; i < size; i++) {
var item = handlers[i];
if (item.handler === handler && item.context === context) {
handlers.splice(i, 1);
return;
}
}
}
};
EventEmitter.prototype.emit = function (type, event) {
var hanlders = this.__z_e_listeners[type];
if (hanlders !== undefined) {
var size = hanlders.length;
for (var i = 0; i < size; i++) {
var ef = hanlders[i];
var handler = ef.handler;
var context = ef.context;
handler.apply(context, [event]);
}
}
};

JS事件派发器EventEmitter的更多相关文章

  1. JS 事件派发器EventDispatcher

    在Java和AS中经常用到EventDispatcher,写了一个JS版本的. addListener :添加事件监听器 removeListener:移除事件监听器 dispatchEvent:派发 ...

  2. 使用lua实现一个简单的事件派发器

    设计一个简单的事件派发器,个人觉得最重要的一点就是如何保证事件派发过程中,添加或删除同类事件,不影响事件迭代顺序和结果,只要解决这一点,其它都好办. 为了使用pairs遍历函数,重写了pairs(lu ...

  3. 谷歌浏览器插件-html页面js事件查看器

    谷歌浏览器插件-html页面js事件查看器 1.下载 下载地址:http://files.cnblogs.com/files/graceup/VisualEvent.zip 解压得到文件:Visual ...

  4. 48、[源码]-Spring容器创建-初始化事件派发器、监听器等

    48.[源码]-Spring容器创建-初始化事件派发器.监听器等 8.initApplicationEventMulticaster();初始化事件派发器: 获取BeanFactory 从BeanFa ...

  5. Unity-自定义事件派发器的两次尝试

    一.前言: 在游戏开发的很多时候,需要引用其他类的方法,但是一旦类多起来了,相互引用会导致引用关系混乱,极其难以阅读. 以前初次做抖音小游戏时,和一位经验老道的cocos程序员合作,看到我写的代码他不 ...

  6. 【node.js】事件循环、EventEmitter

    Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. 事件驱动程序 ...

  7. cocos2d JS 自定义事件分发器(接收与传递数据) eventManager

    简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...

  8. Node.js 事件

    Node.js 事件 Node.js 所有的异步I/O 操作在完成时都会发送一个事件到事件队列. Node.js里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, ...

  9. Node.js事件循环

    Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...

随机推荐

  1. ExtJS4 自己主动生成控制grid的列显示、隐藏的checkbox

    因为某种原因.须要做一个控制grid列显示的checkboxgroup,尽管EXTJS4中的gridpanel自带列表能够来控制列的显示隐藏,可是有这种需求(须要一目了然) 以下先上图 waterma ...

  2. 【Python】Python中in与not in

    在python中,要判断特定的值是否存在列表中,可使用关键字in,判断特定的值不存在列表中,可使用关键字not in letters = ['A','B','C','D','E','F','G'] i ...

  3. 关于PM的认识

    1 我眼中的PM 1.1 人云“一个管理,半个专家”,我说“一个管理,两个专家” 如今,我发现我们不得不面对这样一个现实——角色兼职.我习惯上把项目分为三类:性命攸关的项目(涉及到人身安全的项目,如铁 ...

  4. 《textanalytics》课程简单总结(2):topic mining

    coursera上的公开课<https://www.coursera.org/course/textanalytics>系列,讲的很不错哦. 1."term as topic&q ...

  5. flash插件使用外部数据的方法

    使用xml保存需要改变的数据,如轮播图的图片路径,也可以在xml中指定数据库地址等

  6. jQuery Validate(二)

    刚刚试了所谓的新版的用法.千万别问我是多新,因为我也不知道... <!DOCTYPE html> <html> <head> <script src=&quo ...

  7. 使用Docker开发NodeJs APP

    英文版原文地址 这是两篇连载文章的第一篇,讲解了如何使用 Docker 替代 Vagrant 开发基于 Express 框架的NodeJs App的部分细节.不过,这次要增加点难度:我们要使用 con ...

  8. SQL注入基础入门

    一般的WEB架构 SQL注入成因: 用户开启浏览器并连接http://www.xxx.com.位于逻辑层的Web服务器从文件系统中加载脚本将其传递给脚本引擎,脚本引擎负责解析并执行脚本. 脚本使用数据 ...

  9. 【WPF学习笔记】之如何设置下拉框读取SqlServer数据库的值:动画系列之(一)

    先前条件:设置好数据库,需要三个文件CommandInfo.cs.DbHelperSQL.cs.myHelper.cs,需要修改命名空间,参照之前随笔http://www.cnblogs.com/Ow ...

  10. 流式 storm介绍

    Storm是什么 如果只用一句话来描述storm的话,可能会是这样:分布式实时计算系统.按照storm作者的说法,storm对于实时计算的意义类似于hadoop对于批处理的意义.我们都知道,根据goo ...