4

我的代码包含很多多个if语句。有没有其他方法可以摆脱这些陈述。例如假设我有以下条件

if(t1 >= 1 && t2 == 0 && t3 == 0) $('div.b_class').fadeIn();
if(t1 == 0 && t2 >= 1 && t3 == 0) $('div.c_class').fadeIn();
if(t1 == 0 && t2 == 0 && t3 == 1) $('div.d_class').fadeIn();
if(t1 && t2 >= 1 && t3 == 0) $('div.b_class.c_class').fadeIn();
if(t1 && t3 >= 1&& t2 == 0) $('div.b_class.d_class').fadeIn();

有没有办法简化这些陈述？

4

4 回答 4

5

You could use a switch case structure with conditions inside like this : 

switch(true)
{
 case (t1 >= 1 && t2 == 0 && t3 == 0) : $('div.b_class').fadeIn(); break;
 case (t1 == 0 && t2 >= 1 && t3 == 0) : $('div.c_class').fadeIn(); break;
 case (t1 == 0 && t2 == 0 && t3 == 1) : $('div.d_class').fadeIn(); break;
 case (t1 && t2 >= 1 && t3 == 0)      : $('div.b_class.c_class').fadeIn(); break;
 case (t1 && t3 >= 1&& t2 == 0)       : $('div.b_class.d_class').fadeIn(); break;
}
于 2012-10-21T16:01:49.823 回答
1

这应该有效：

var selector = 'div';
if (t1) {
    selector += '.b_class';
}
if (t2) {
    selector += '.c_class';
}
if (t3) {
    selector += '.d_class';
}
$(selector).fadeIn();

它依赖于 tX 的“真实/虚假”值（0 是虚假的，1-3 是真实的，有关“真实/虚假”的更多详细信息，请参见http://11heavens.com/falsy-and-truthy-in-javascript）。

这种方法的唯一警告是它允许selectorif 'div.b_class.c_class.d_class'、t1和t2都是t3非零的。

如果selector在这种情况下不可接受，请将t3条件更改为if (t3 && !(t1 || t2))。

当t3条件修改为时，可以附加if (t3 && !(t1 || t2))的唯一方法是 if非零且两者和都为零。selectord_classt3t1t2

var selector = 'div';
if (t1) {
    selector += '.b_class';
}
if (t2) {
    selector += '.c_class';
}
if (t3 && !(t1 || t2)) { //modified conditional
    selector += '.d_class';
}
$(selector).fadeIn();

更新：

最初的答案是我怀疑 OP 的实际意图（因为 OP 暗示代码是假设的），所以对尤文的发现表示赞赏。为了满足cbayram，这将复制 OP 的逻辑（尽管我不确定您是否可以将其称为“简化”，因为它只删除了一个if比较并且更难阅读）。

var selector = 'div';
if ((((t1 && !(t2 || t3)) || (t1 && t3) || (t1 && t2 && !t3))) && !(t1 && t2 && t3)) {
    selector += '.b_class';
}
if ((t2 && !(t1 || t3)) || (t1 && t2 && !t3)) {
    selector += '.c_class';
}
if ((t3 === 1 && !(t1 || t2)) || (t1 && t3 && !t2)) {
    selector += '.d_class';
}
if (selector === 'div') {
    selector = '';
}
$(selector).fadeIn();

这是它的实际操作：http: //jsfiddle.net/dX7AK/

于 2012-10-20T21:08:13.250 回答
1

好的，假设您确实有很多ifs 并且您t的 s 是固定整数，并且主要目标是您的很多很多“规则”的可读性。然后你可以试试下面的。

首先，我会确保所有ts 都具有有效值并跳过未定义的情况。如果变量t是真实的逻辑值而不是数字，我也会只使用显式规则（例如，t1 == 0而不是使用>, <, >=, <=），尤其是。如果您要实施的规则与您的if陈述中表达的规则一样多样化。

然后，您可以使用数字系统对逻辑进行编码，例如，使用小数以获得良好的可读性。对于每个t您使用编码逻辑的新“逻辑数”的一个小数位：

111 means t1 == t2 == t1 == 1
201 means t1 == 2, t2 == 0, t3 == 1
etc.

该号码很容易从您的t1、t2和中创建t3：

num = t1*100 + t2*10 + t3

下面的 switch-case 实现了您的逻辑。它是您的if规则的展开版本。通过不允许多值检查（通过>=等），我们需要为您要处理的每个组合指定一个规则。这可能会增加您必须指定的数量或规则，但也可能使您的逻辑规则更具可读性和可维护性。

var getFadeInClass = function(t1,t2,t3) {
    // for the sake of shortness I use ".b" instead of ".b_class" etc.
    var num = t1*100 + t2*10 + t3

    switch(logic_state){
    case 100:; case 200:; case 300: return ".b"
    case  10:; case  20:; case  30: return ".c"

    case   1:                       return ".d"

    case 110:; case 120:; case 130:;
    case 210:; case 220:; case 230:;
    case 310:; case 320:; case 330: return ".b.c"

    case 101:; case 102:; case 103:;
    case 201:; case 202:; case 203:;
    case 301:; case 302:; case 303: return ".b.d"
}
return ""

}

您还可以使用数学或其他类型的测试来推理数字。

var x = t1*100 + t2*10 + t3
if ( x != 0 && x%100    == 0)  return "b"
if ( x != 0 && x%100%10 == 0)  return "c"
if ( x == 1 )                  return "d"

但我更喜欢开关盒，因为它读起来更好看。我希望这是您想要实现的目标。:)

你可以在这个 fiddle中查看这个十进制逻辑的运行版本。

干杯，尤文

于 2012-10-20T20:27:37.683 回答
0

如果 t1、t2 和 t3 为 0 到正无穷大，则修改后的逻辑有点浓缩：

<!DOCTYPE html>
<html>
   <head>
      <script type="text/javascript">
        function orig(t1, t2, t3) {
            var hits = "";
            if(t1 >= 1 && t2 == 0 && t3 == 0) hits += 'div.b_class\n';
            if(t1 == 0 && t2 >= 1 && t3 == 0) hits += 'div.c_class\n'; 
            if(t1 == 0 && t2 == 0 && t3 == 1) hits += 'div.d_class\n';
            if(t1 && t2 >= 1 && t3 == 0) hits += 'div.b_class.c_class\n';
            if(t1 && t3 >= 1 && t2 == 0) hits += 'div.b_class.d_class\n';
            return hits;
        }
        function modified(t1, t2, t3) {
            var hits = "";
            if(t2 >= 1 && t3 == 0)
                hits += (t1 == 0)?'div.c_class\n':'div.b_class.c_class\n';
            if(t1 >= 1 && t2 == 0) 
                hits += (t3 == 0)?'div.b_class\n':'div.b_class.d_class\n';          
            if(t1 == 0 && t2 == 0 && t3 == 1)   
                hits += 'div.d_class\n';
            return hits;
        }

        function runTest() {
            for(var i = 0; i < 3; i++) {
                for(var j = 0; j < 3; j++) {
                    for(var k = 0; k < 3; k++) {                    
                        var o = orig(i, j, k);
                        var m = modified(i, j, k);
                        if(o != m)
                            console.info(o + " | " + m);
                        console.warn("t1="+i+", t2="+j+", t3="+k + ": " + ((o == m)?"PASS":"FAIL"));            
                    }       
                }       
            }       

        }
      </script>
   </head>
   <body onload="runTest()">
   </body>
</html>

无论哪种情况，这都是测试您的修改与原始版本的好方法。

于 2012-10-20T05:24:23.213 回答