原文地址：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]);

         }

     }

 };

测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>EventEmitter Test</title>

    <script src="./EventEmitter.js"></script>

    <script>

        var zObj = function () {

            this._props = {};

            this._emitter = new EventEmitter();

        };

        zObj.prototype.set = function (key, value) {

            var old = this._props[key];

            if (old !== value) {

                this._props[key] = value;

                this.emitChange(key, value, old);

            }

        };

        zObj.prototype.get = function (key) {

            return this._props[key];

        };

        zObj.prototype.onChange = function (handler, context) {

            this._emitter.on("change", handler, context);

        };

        zObj.prototype.offChange = function (handler, context) {

            this._emitter.off("change", handler, context);

        };

        zObj.prototype.emitChange = function (p, nv, ov) {

            this._emitter.emit("change", {

                source: this,

                property: p,

                newValue: nv,

                oldValue: ov

            });

        };

        var obj = new zObj();

        obj.onChange(function (evt) {

            console.log(evt)

        });

        obj.set("id", 1);

        obj.set("id", 2);

    </script>

</head>

<body>

</body>

</html>

函数

主要有以下三个功能函数：

  • on :添加事件监听器
  • off：移除事件监听器
  • emit：派发事件

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

  1. JS事件派发器EventEmitter

    原文地址:http://zhangyiheng.com/blog/articles/js_event_mitter.html 需求 随着Browser客户端JS越来越复杂,MVC(Client端)设计 ...

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

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

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

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

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

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

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

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

  6. pyglet模块的EventDispatcher(事件派发对象）

    事件派发对象用于处理事件的派发与响应,pyglet的window对象正是继承了它才具有处理事件的能力. 步骤: 1.注册事件类型: EventDispatcher.register_event_typ ...

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

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

  8. 项目记录22-- tolua基于lua框架事件派发

     每天晚上抽点时间写一点点就一点点,曾经不写博客可是如今.不为别的仅仅是为了告诉别人我还存在.         这几天在地铁上发现好多人都还在玩消除游戏,今天起码看到5个人,可是玩的版本号都不一样.看 ...

  9. js事件绑定及深入

    学习要点: 1.传统事件绑定的问题2.W3C事件处理函数3.IE事件处理函数4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现 ...

随机推荐

  1. MySQL游标的简单实践

    Q:为什么要使用游标? A: 在存储过程(或函数)中,如果某条select语句返回的结果集中只有1行,可以使用select into语句(上几篇博客有介绍到用法)来得到该行进行处理:如果结果集中有多行 ...

  2. jenkins 使用注意

    在jenkins使用的时候,在输入文件地址的时候,文件各级目录不能有空格等特殊符号!否则报错!

  3. ActiveXObject函数详解（转自http://eyesinthesky.iteye.com/blog/1560033）

    什么是 ActiveX 控件? ActiveX 控件广泛用于 Internet.它们可以通过提供视频.动画内容等来增加浏览的乐趣.不过,这些程序可能出问题或者向您提供不需要的内容.在某些情况下,这些程 ...

  4. poj2253 Frogger Dijkstra变形

    题目链接:http://poj.org/problem?id=2253 就是求所有路径的最大边权值的最小值 处理时每次找出距离当前的已选的节点的最短距离,然后更新每个未选节点的值 代码: #inclu ...

  5. 使用maven根据JSON文件自动生成Java POJO类（Java Bean）源文件

    根据JSON文件自动生成Java POJO类(Java Bean)源文件 本文介绍使用程序jsonschema2pojo来自动生成Java的POJO类源文件,本文主要使用maven,其他构建工具请参考 ...

  6. 通过BitSet完成对单词使用字母的统计

    什么是BitSet BitSet类实现了一组位或标记(flag),这些位可被分别设置或清除.当需要跟踪一组布尔值时,这种类很有用. 您只需让每一位对应一个值,并根据需要设置或清除即可. 标记(flag ...

  7. 解决window.navigator.geolocation.getCurrentPosition在IOS10系统中无法进行地理定位问题

    昨天接到用户通知说在点击"看场地"时无法获取地理位置信息. 在接到通知时,首先想到的是排查机型问题.由于客户多为IOS用户,所以最先看的是在安卓是有没有此问题的发生,调查结果为安卓 ...

  8. 学java网络编程的心得体会

    网络编程简单思路 一.发送端1创建udp服务,通过DatagramSocket对象;2确定数据,封装成包DatagramPacket(byte[] buf, int length, InetAddre ...

  9. Cornerstone 3.0.3 for mac 破解版

    破解版本 直接安装即可 解压密码:xclient.info 下载地址: 链接: https://pan.baidu.com/s/1mhD64vY 密码: nwmc

  10. Deep Learning in R

    Introduction Deep learning is a recent trend in machine learning that models highly non-linear repre ...