jQuery 自定义事件序列答案

【问题标题】：jQuery custom event sequencejQuery 自定义事件序列
【发布时间】：2011-03-14 15:45:26
【问题描述】：

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

这是一个期望行为的算法（在 Human# 中）：

this.trigger('onBeforeAction'); 如果（！onBeforeAction.wasCanceled）{ this.doAction(); this.trigger('onAfterAction'); }

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

$(myIntance).bind('onBeforeAction', function(){ if (!someCondition.satisfied) 返回假；返回真； }); $(myIntance).bind('onAfterAction', function(){ // 在这里响应动作 });

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

【问题讨论】：

标签： jquery sequence custom-events

【解决方案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 替换为您的自定义事件名称 :)

【讨论】：

您能否详细说明如何通知我的对象 onBeforeAction 处理程序返回 false 并且不应引发后续的 onAfterAction 事件？抱歉，我只是没有看到全貌

【解决方案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(); 三次显示 Current speed: ... 消息三次。 goFaster() 方法的后续执行显示速度增加被阻止消息。

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

谢谢

【讨论】：