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

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

伪代码：

我想知道什么被认为是妥善处理这一案件的良好做法：

• 通常使用哪些模式来实现这一点
• 是否在事件处理程序中使用条件
• 或者，当状态发生变化时，绑定和解除绑定处理程序是什么
• 我是否遗漏了一些明显的其他/更好的解决方案

---

更新

在阅读到目前为止的答案时，似乎有一种强烈的倾向，即在处理程序中使用条件语句。虽然我暗自希望我可能错过了另一个选择，但我还是有点期待这一点

我喜欢@J-p的方法，因为它将方法和状态分开配对，这似乎比简单的

开关

或

if/else

语句更具可伸缩性和可维护性。

---

然而，我很有兴趣听听其他地方是否有不同的解决方法，也许使用不同语言的例子

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

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;

}());

---

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

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;

}());

---

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

我认为检查事件处理程序中的条件比绑定/解除绑定事件处理程序更简单、更集中、更一致。我经常使用sitewide

click

事件来检查与HTML元素关联的一些用户数据，以确定操作过程

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

---

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

答案可能是情境性的，但与往常一样，除非存在性能问题，否则应该倾向于简单而不是效率

我认为检查事件处理程序中的条件比绑定/解除绑定事件处理程序更简单、更集中、更一致。我经常使用sitewide

click

事件来检查与HTML元素关联的一些用户数据，以确定操作过程

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

---

如果事件处理程序在绑定到用户体验时有任何明显的性能影响，那么您可能想重新考虑这一点，但我想不出有多少情况下会有这种影响。

我说您只需检查单击事件。然后在click事件中检查实例状态

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

---

我说你只是检查一下点击事件。然后在click事件中检查实例状态

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

通常使用哪些模式来实现这一点？类似于
是否在事件处理程序中使用条件？是，请参见示例
或者，当状态发生变化时，绑定和解除绑定处理程序是什么？不，但这是可能的。
我是否遗漏了一些明显的其他/更好的解决方案？我不这么认为

通常使用哪些模式来实现这一点？类似于
是否在事件处理程序中使用条件？是，请参见示例
或者，当状态发生变化时，绑定和解除绑定处理程序是什么？不，但这是可能的。

---

我是否遗漏了一些明显的其他/更好的解决方案？我不这么认为

您可以使用某种调度器：

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

---

您可以使用某种调度器：

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

---

谢谢这种方法虽然比简单的条件方法更加冗长，但却能保持事情的整洁。可能会考虑到一个不只是几个州的案例。对于有条件的。

'active'=>'a'

：意外标记=是，JS中没有哈希火箭）。谢谢这种方法虽然比简单的条件方法更加冗长，但却能保持事情的整洁。可能会考虑到一个不只是几个州的案例。对于有条件的。

'active'=>'a'

：意外标记=是，JS中没有哈希火箭）。谢谢你的例子对于有条件的，似乎是这样。这再一次证明，简单地将内部答案链接是一个坏习惯。。。我对那个例子很感兴趣。@Salketer你说得绝对正确。为我辩护：答案几乎是8年前的，即编码空间中的光年。我试图找到代码，但我想它是在dev null中。@KooiInc不用担心。。。9年前，你不能指望这个问题会成为谷歌这种模式的顶级链接。谢谢你的例子对于有条件的，似乎是这样。这再一次证明，简单地将内部答案链接是一个坏习惯。。。我对那个例子很感兴趣。@Salketer你说得绝对正确。为我辩护：答案几乎是8年前的，即编码空间中的光年。我试图找到代码，但我想它是在dev null中。@KooiInc不用担心。。。9年前，你不能指望这个问题会成为谷歌对这个模式的顶级链接。谢谢你的全面回答！谢谢你的全面回答！