Javascript 模式：条件事件处理程序答案

【问题标题】：Javascript pattern: Conditional event handlerJavascript 模式：条件事件处理程序
【发布时间】：2011-03-30 08:11:55
【问题描述】：

给定例如某种类实例具有状态（例如“活动”、“非活动”……）。该实例还将单击事件附加到例如一个链接，但事件处理程序会根据实例的状态执行不同的操作。

伪代码：

IF instance state IS 'active' AND link is clicked THEN call function A
IF instance state IS 'inactive' AND link is clicked THEN call function B
…

我想知道正确处理这种情况的良好做法是什么：

通常使用哪些模式来实现这一目标？
您是否在事件处理程序中使用了条件？
或者当状态改变时是绑定和解除绑定的处理程序？
我是否遗漏了一些明显的其他/更好的解决方案？

更新

到目前为止，在阅读答案时，似乎强烈倾向于在处理程序中使用条件。虽然我暗自希望我可能会错过一个替代方案，但我有点预料到这一点。

我喜欢@J-P 的方法，因为它保持方法和状态的配对分开，这似乎比简单的switch 或if/else 语句更具可扩展性和可维护性。但是，我很想知道这是否在其他地方以不同的方式解决，也许使用不同语言的示例？

【问题讨论】：

标签： javascript events event-handling design-patterns

【解决方案1】：

通常使用哪些模式来实现这一目标？类似this
您是否在事件处理程序中使用条件？是的，请参见示例
或者当状态改变时是绑定和解除绑定处理程序？不，但这是一种可能性。
我是否错过了一些明显的其他/更好的解决方案？我不这么认为

【讨论】：

感谢您的示例。 + 似乎是有条件的。
再一次证明简单地链接内部答案是一个坏习惯......我会对那个例子感兴趣。
@Salketer 你完全正确。为我辩护：答案几乎是 8 岁，那是编码空间的光年。我试图找到代码，但我想它在 dev null 中。
@KooiInc 不用担心...... 9 年前，您无法指望这个问题会成为谷歌针对这种模式的顶级链接。

【解决方案2】：

我会保留相同的处理程序并在其中调用适当的方法。

var Foo = (function(){

    function Foo() {

        this.state = 'active';

    }

    Foo.methodMapping = {
        active: 'a',
        inactive: 'b'
    };

    Foo.prototype = {

        a: function(){}.
        b: function(){},

        handler: function(el) {

            // This'll handle the event, I guess
            // (Assuming `this` refers to instance, not element)

            var state = this.state;
            if (state in Foo.methodMapping) {
                return this[Foo.methodMapping[state]].apply(this, arguments);
            } else {
                // (prob don't need to cover this case)
            }

        }

    };

    return Foo;

}());

【讨论】：

谢谢！这种方法——虽然比简单的条件更冗长——使事情保持整洁。对于不仅仅是几个“状态”的情况，可能会考虑这一点。 + 表示条件。
'active' => 'a': 意外令牌 =
是的，JS 中没有哈希火箭；）。

【解决方案3】：

答案可能因情况而异，但与往常一样，人们应该更倾向于简单而不是效率，除非存在性能问题。

我认为在事件处理程序中检查条件是一种比绑定/解除绑定事件处理程序更简单、集中且更一致的方法。我经常使用站点范围内的click 事件来检查与 HTML 元素关联的一些用户数据以确定操作过程。

与您的示例类似，其中一项操作是“不做任何事情”，例如我设置了一个标志，表明它已被禁用。另一种选择是删除点击处理程序。但这需要更多的代码来做同样的事情，并且意味着代码控制已经被分割：以前它完全在点击处理程序中，现在它在点击处理程序中，以及添加或删除事件的其他东西。

如果事件处理程序在绑定到用户体验时对性能有任何可察觉的影响，那么也许您想重新考虑这一点，但我想不出很多情况。

【讨论】：

感谢您的全面解答！

【解决方案4】：

id 说你只是检查点击事件。然后在点击事件中检查实例状态

link.live('click', function() {
 switch(instance.state){
  case 'active': function A(); break;
  case 'inactive': function B(); break;
 }     
}

【讨论】：

【解决方案5】：

您可以使用某种调度程序：

$link.on('click', function () {
  (state ? A : B).call();
});

【讨论】：