原文地址：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. scala读取jar包外配置文件的方式

    在scala的开发过程中,经常会修改程序的参数,将这些参数放到配置文件中避免了重复编译,打包的过程 这里给出读取配置文件的三种方式 方式一: 这是最常见的读取配置文件方式 val postgprop ...

  2. 洛谷【P2393】题解

    P2393 [yyy loves Maths II] 原题链接 话说,这题其实方法对了,也蛮水的. 首先方法是一样的,直接扩大忽略精度问题. 其次,我用了c++的函数控制输出小数位数,方法:cout& ...

  3. LNMP之编译安装PHP出现的问题

    2010年以前,互联网公司最常用的Web服务组合就是LAMP(即Linux.Apache.MySQL.PHP),近几年随着Nginx Web服务的逐渐流行,又出现了新的Web服务环境组合--LNMP ...

  4. [刷题]算法竞赛入门经典(第2版) 6-1/UVa673 6-2/UVa712 6-3/UVa536

    这三题比较简单,只放代码了. 题目:6-1 UVa673 - Parentheses Balance //UVa673 - Parentheses Balance //Accepted 0.000s ...

  5. Java内存模型四

    volatile的特性 当我们声明共享变量为volatile后,对这个变量的读/写将会很特别.理解volatile特性的一个好方法是:把对volatile变量的单个读/写,看成是使用同一个锁对这些单个 ...

  6. Java中HashMap源码分析

    一.HashMap概述 HashMap基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.(除了不同步和允许使用null之外,HashMap类与Hashtab ...

  7. 浅谈mmap()和ioremap()的用法与区别

    一.mmap()mmap()函数是用来将设备内存线性地址映射到用户地址空间.(1)首先映射基地址,再通过偏移地址寻址:(2)unsigned char *map_cru_base=(unsigned ...

  8. 关于XML(可扩展标记语言)的基础知识与写法------2017-05-18

    XML(Extensible Markup Language) HTML:超文本标记语言,主要用来展示   XML:可扩展标记语言,用来做数据传输XML特点: 1.树状结构,有且只有一个根 2.标签名 ...

  9. 【JAVAWEB学习笔记】08_MySQL&JDBC回顾

    今天晨读单词: CRUD:增删改查(create/read/update/delete)create:新增项目read:查询update:修改delete:删除 desc 表名:查看表结构drop:删 ...

  10. Fragment回调接口应用间分享数据

    package com.example.mydemo; import java.util.List; import android.app.Activity; import android.app.A ...