自定义Javascript EventManager - 请帮助我完成 [英] Custom Javascript EventManager - please help me complete

问题描述

我正在尝试创建一个自定义的JavaScript EventManager类。我已经采用了格兰特·斯金纳（Grant Skinner）在他的easel.js框架中使用的格式来创建这个类，需要坚持下去。在这一点上，我真的很失落 - 我认为 - 至少在概念意义上 - 我在这里有正确的想法，这主要是逃避我的范围问题。

$ b $我希望有人在这里可以帮助我把这一点放到addListener和dispatchEvent的功能上。

 代码] 
 
（function（window）{
 var EventManager = function（）{
 this.initialize（）; 
} 
 var p = EventManager .prototype; 
 
 //放置属性
 
 
 
 //构造函数
 p.initialize = function（）{
 p.listeners = new Array（）; 
} 
 
 //公共方法
 
 
 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）; 
} 
返回此; 
} 
 
 p.dispatchEvent = function（event，params）{
 console.log（Dispatch Event）; 
 //循环通过listeners数组
 for（var index = 0; index< listeners [ev] .length; index ++）{
 //执行匹配'event' - 循环遍历所有索引和
 //当发现ev时，执行
 listeners [event] [index] .apply（window，params）; 
} 
} 
 
 p.removeListener = function（event，fn）{
 // split array 1 item after the listener 
 // shorten to删除它
 //将两个数组一起返回
 
} 
 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] 
  

感谢您的帮助!!!

解决方案

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

在你的代码的大部分工作中，这里和那里只有几个小问题。 IFFE是即时调用的函数表达式（IIFE）。这是你正在做的整个功能（窗口）{}（窗口）。但是在这种情况下，这绝对是不必要的，只是污染了代码。在javascript中没有像哈希表这样的东西，但是你可以使用一个对象而不是它。属性的名称成为一个关键字，它们的值现在是哈希表的值。

另外一种和你无关的。这样做很好的事情，但是如果你有3个处理程序附加到一个事件，而第二个失败了JavaScript异常，第三个将永远不会被执行。您可能需要快速了解prototype.js如何在此处执行事件： https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/event.js 他们的事件是非阻止的。

I am trying to create a custom javascript EventManager class. I've adopted the format Grant Skinner uses in his easel.js framework for creating the class and need to stick with it. I'm really just kind of lost at this point - I think that - at least in a conceptual sense - I have the right idea here and that it's mostly scope issues that evade me.

I'm hoping someone here can help me take this to the point where addListener and dispatchEvent are functional.

[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]

Thank you for your help!!!

解决方案

Here's a working example of fixed code: http://jsfiddle.net/JxYca/3/

For the most part your code was working, just a few small problems here and there. IFFE is Immediately-Invoked Function Expression (IIFE). This is what you were doing with the whole function(window) {}(window). However in this case it's absolutely unnecessary and just pollutes the code. There's no such thing as hashtable in javascript, however, you can just use an object instead of it. The names of the properties become a key and their value is now value of the hashtable.

An additional and sort of unrelated though for you. This way of doing events in nice, but if you have, say, 3 handlers attached to an event, and second one fails with JavaScript exception, third one will never get executed. You might want to take a quick look at how prototype.js does events here: https://github.com/sstephenson/prototype/blob/master/src/prototype/dom/event.js Their events are non-blocking.

这篇关于自定义Javascript EventManager - 请帮助我完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！