jQuery Switch Case 插件？答案

【问题标题】：jQuery Switch Case Plugin?jQuery Switch Case 插件？
【发布时间】：2009-10-24 04:58:03
【问题描述】：

我知道 switch case 语句是 javascript 固有的，您无法更改它。我还在学习 javascript 和 jQuery，所以我能过得去，但我知道的东西还不够多，无法写出 jQuery 本身级别的东西。所以，把它当作一个想法或一个关于这个想法是否可行的问题。

这是我的想法，一个可以使用对象的 switch case 语句……可以这样使用：

switch( $(this) ){

 case .hasClass('foo'):
  // do something
  break;

 case .filter('.bar').attr('id') == 'foo':
  // do something else
  break;

}

编辑：即使是这样的事情也会很好（可能是一个更合理的想法）......

switch ($(this).hasClass()) {

 case 'foo':
  alert('found a foo!');
  break;

 case 'bar':
  alert('found a bar!');
  break;

}

【问题讨论】：

耸耸肩似乎是正确的做法？
大声笑，现在我已经有时间考虑这个问题了——我已经包含了第二个更合理的例子。另外，我把它做成了一个社区维基，因为这个问题可能永远都没有答案。看看其他人是否会觉得这很有用。

标签： jquery switch-statement

【解决方案1】：

开关通常不是解决问题的最佳方法，但使用 jQuery 你可以制作一个类似于开关语句的插件：

(function($) {
    $.fn.switchClasses = function(switches) {
        return this.each(function() {
            var that = this;
            $.each(this.attr("class").split(' '), function(i, class) {
                var func = switches[class];
                if(func)
                    func.apply(that, class);
            });
        });
    };
})(jQuery);

你会像这样使用插件：

$(this).switchClasses(
    {
        "class1":
        function(class) {
            // Do something for this class, 
            // the "this" variable is the jquery object that matched the class
        },

        "class2":
        function(class) {

        }
    }
);

【讨论】：

我一直喜欢使用对象字面量作为快速切换语句。 +1

【解决方案2】：

首先，switch 语句只对 int 有效。我不确定为什么 javascript 保留了 C/C++ 的这个限制，但它就在那里。

如果您要处理多个选项，使用嵌套的 if-then-else 块而不是 switch 可能会导致代码高度不可读。

但是，就像在 C 和 C++ 中一样，也有一些变通方法，其中涉及像 goto 一样使用“break”，这并不总是邪恶的。这是一种情况（大量嵌套的 if-the-else），其中 goto 会使代码更高效和可读。在 C/C++ 中，您可以使用 goto 来实现这一点，标签位于 if 序列的末尾（现在是 switch 括号的末尾），并跳过跳转到 switch 上下文。

switch (1) { //yes, that is a hardcoded 1, we only want the switch block for the break keyword
    if (yourString == "Case 1") {
        do_stuff_1();
        break; // well, we're done, let's get out of here.
    }

//implicit else - if you matched the first one, you'd be out of here

    if (yourString == "Case 2") {
        do_stuff_2();
        break; // well, we're done, let's get out of here.
    }

    // etc.....

    default:
        do_error_condition();
} //end of switch

【讨论】：

【解决方案3】：

普通的if/else 有什么问题？

inst = $(this);

if (inst.hasClass('foo')) {
    // do something
} else if (inst.filter('.bar').attr('id') == 'foo') {
    // do something else
}

【讨论】：

一两个案例后的可读性？

【解决方案4】：

如果你正在处理一个类名，你可以打开element.attr('class')。

如果您处理的不止一个，您可以使用element.attr('class').split(/\s+/) 并检查该数组中的类名称。

我还认为您可能想看看.is()。你可以做if( element.is('a.foo') ) console.log( 'This is a link with a 'foo' class.' );之类的事情

不过，您可能想改变您的方法。我看不出这是做你想做的最有效的方法。

【讨论】：

【解决方案5】：

    (function($) {
    $.fn.switchClasses = function(switches) {
        return this.each(function() {
            var that = this;
            $.each(this.attr("class").split(' '), function(i, classname) {
                var func = switches[classname];
                if(func){
                    func.apply(that, classname);
                }
            });
        });
    };
})(jQuery);

'class' 是保留名称，我添加了一些缺少的括号

【讨论】：