如何在JavaScript中实现简单的优先级侦听器模式

时间:2012-05-31 18:27:03

标签: javascript

我有一个具有此功能的事件/侦听器管理器:

  var addListener = function(event, listener) {
    myListeners[event].push(listener); //assume this code works
  }

但现在我需要改变它,看起来像这样:

  var addListener = function(event, listener, fireFirst) {
    if(fireFirst) {
      myListenersToFireFirst[event].push(listener);
    } else {
      myListenersToFireSecond[event].push(listener);
    }
  }

这样,当调用fireEvent函数时,它将首先触发myListenersToFireFirst数组中的侦听器,然后触发第二个数组中的侦听器。

所以它看起来像这样:

  var fireEvent = function(event) {
    var firstListeners = myListenersToFireFirst[event];
    //for each listener in firstListeners, call `apply` on it

    var secondListeners = myListenersToFireSecond[event];
    //for each listener in secondListeners, call `apply` on it
  }

这是在JavaScript中实现此目的的最佳方法吗?是否有更优雅的方式来实现侦听器事件触发的优先级列表?

1 个答案:

答案 0 :(得分:0)

也许它比我更好......但这是一种特定的方式,我的意思是你必须在块中插入新的处理程序。这是一个更通用的工具,但它似乎适用于您的案例。

我建议:

//makes a closured function that calls this function after the other
Function.prototype.prefix=function(o) {
    var that=this;
    return function(){
        that.apply(this,arguments);
        return o.apply(this,arguments);
    };
}
//prefix=reversed sufix
Function.prototype.sufix=function(o) {return o.prefix(this);}

使用此代码,您可以相互追加/预置函数以形成一种链,它可用于添加另一个侦听器或跟踪函数用法,甚至可以以最小的影响调整代码。

一些用法

function audit() {console.log(arguments.callee.caller,arguments.callee.name,arguments);}
function a() {alert(arguments);}
a=audit.prefix(a);


//a user function
function f() {alert(arguments);}
f("test");//just do the alert as defined
 f=audit.prefix(a);
f("test");//now arguments will be on console too

//a builtin function
//this audit example only write to the console the arguments being passed to it
function audit() {console.log(arguments.callee,arguments);}
//auditing alert function (not too usefull, but shows it works even for
alert=audit.prefix(alert);//alert is now prefixed with audit

//an event handler
document.body.onclick=function() {alert("clicked");};
document.body.onclick=audit.prefix(document.body.onclick);