自定义 Javascript EventManager - 请帮我完成答案

【问题标题】：Custom Javascript EventManager - please help me complete自定义 Javascript EventManager - 请帮我完成
【发布时间】：2012-03-31 13:47:42
【问题描述】：

我正在尝试创建一个自定义 javascript EventManager 类。我采用了 Grant Skinner 在他的 easel.js 框架中使用的格式来创建类，并且需要坚持使用它。在这一点上我真的迷路了 - 我认为 - 至少在概念上 - 我在这里有正确的想法，而且主要是范围问题让我回避了。

我希望这里有人可以帮助我解决 addListener 和 dispatchEvent 的功能。

[code]

(function(window) {
    var EventManager = function() {
        this.initialize();
    }
    var p = EventManager.prototype;

    // place properties here



    // Constructor
    p.initialize = function() {
        p.listeners = new Array();
    }

    // public methods


    p.addListener = function(fn, event) {
        console.log("p.addListener Hit");
        console.log("event: " + event);
        console.log("handler function: " + fn);
        if(!this.listeners[event]) {
            this.listeners[event] = [];
        }

        if(fn instanceof Function) {
            this.listeners[event].push(fn);
        }
        return this;
    }

    p.dispatchEvent = function(event, params) {
        console.log("Dispatch Event");
        // loop through listeners array
        for(var index = 0; index < listeners[ev].length; index++) {
            // execute matching 'event' - loop through all indices and
            // when ev is found, execute
            listeners[event][index].apply(window, params);
        }
    }

    p.removeListener = function(event, fn) {
        // split array 1 item after our listener
        // shorten to remove it
        // join the two arrays back together

    }
    window.EventManager = EventManager;

}(window));


[/code]
[code]
    <script>

    eventManager = new EventManager();

    var FooTest = function() {
        this.fire = function() {
           //alert("fire");
        }

            this.fire();
     };

    function onFire() {
       // console.log("FIRED!");
    }

    var o = new FooTest();
   eventManager.addListener.call("fire", onFire );
   // eventManager.dispatchEvent.call(o,'fire' );

    </script>
[/code]

【问题讨论】：

listners 被清除为数组，但您将其用作哈希表。 apply 将数组作为第二个参数，但您正在为它提供一个字符串。为什么在 addListener 上需要 .call？它现在的编写方式是你希望“fire”在函数内部。您以一种非常奇怪的方式使用 IIFE，您根本不需要最顶层的功能。除此之外，您的代码应该可以工作。
Ilya - 什么是 IIFE？感谢您指出我混淆了数组和哈希表。您如何以我需要的方式在 javascript 中声明哈希表？当您说我根本不需要最顶层的功能时，您的意思是什么？再次感谢:)
我知道这个问题已经很老了，但我写了一个小 (1kb) 库，它让自定义事件的生活变得更加轻松：源代码和 API 可以在我的博客文章中找到：pointsoftware.ch/de/…
github.com/uxitten/jetemit

标签： javascript events event-handling dom-events javascript-framework

【解决方案1】：

这是一个固定代码的工作示例：http://jsfiddle.net/JxYca/3/

在大多数情况下，您的代码都可以正常工作，只是偶尔出现一些小问题。 IFFE 是立即调用函数表达式 (IIFE)。这就是您对整个函数（窗口）{}（窗口）所做的事情。但是在这种情况下，这是绝对没有必要的，只会污染代码。 javascript 中没有哈希表之类的东西，但是，您可以只使用一个对象来代替它。属性的名称成为键，它们的值现在是哈希表的值。

虽然对你来说是一个额外的和不相关的。这种处理事件的方式很好，但是如果你有 3 个处理程序附加到一个事件，第二个处理程序因 JavaScript 异常而失败，第三个处理程序将永远不会被执行。您可能想在这里快速了解一下prototype.js 是如何处理事件的：https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/event.js 他们的事件是非阻塞的。

【讨论】：