Question

我正在创建一个自定义JS对象。该对象执行一些action。我希望能够通知消费者该对象（通过触发自定义事件），action将执行并且 action已经执行。（这种行为模型在ASP.NET中已知，其中控件具有onBeforeAction和onAfterAction个事件棘手的部分是我希望消费者能够停止/中断事件序列。

这是一个具有所需行为的算法（在人类＃中）：

this.trigger('onBeforeAction');
if (!onBeforeAction.wasCanceled){
  this.doAction();
  this.trigger('onAfterAction');
}

在我的对象中使用此功能将允许消费者执行以下操作：

$(myIntance).bind('onBeforeAction', function(){
  if (!someCondition.satisfied)
    return false;
  return true;
});
$(myIntance).bind('onAfterAction', function(){
  // respond to action here
});

关于如何实现'可控'事件序列的任何想法都会很棒提前谢谢。
// R

Answer 1

(function ($) {
  var origin = $.fn.click;
  $.fn.click = function(event) {
    //before function 
     origin.call(this, event);
     //after function 
     // remember to use return as this could help with jq chainability 
  };
})(jQuery);

将Click替换为您的自定义事件名称：）

Answer 2

我想我找到了解决办法这就是我想出的：

// my object
function Car(){
    this.currentSpeed = 0;
}

Car.prototype.goFaster = function(){
    var event = $.Event('beforeSpeedIncrease'); 
    $(this).trigger(event); // notify "onBeforeAction"
    if (!event.isDefaultPrevented()){
        this.currentSpeed += 10; // actual action
        $(this).trigger('afterSpeedIncreased'); // notify "onAfterAction"
    }
}

然后一些消费者会这样做：

var speedLimit = 30;

var carUnderControl = new Car();

$(carUnderControl)
    .bind('beforeSpeedIncrease', function(e){
        if (carUnderControl.currentSpeed >= speedLimit){
            e.preventDefault();
            console.log('Speed increase prevented, current speed: ' + carUnderControl.currentSpeed);
        }
    })
    .bind('afterSpeedIncreased', function(){
        console.log('Current speed: ' + carUnderControl.currentSpeed);
    });

我在FireFox中使用Firebug运行（当然）。从Firebug的控制台执行carUnderControl.goFaster();三次显示当前速度：... 消息三次。 goFaster()方法的后续执行显示阻止加速消息。

这就是我想要实现的功能任何建议如何改善这一点是非常受欢迎的。

由于

jQuery自定义事件序列

2 个答案: