如果/否则噩梦。 jQuery优化技巧？

Question

我在一个函数中有以下（示例）jQuery 代码，如您所见，它包含一些可怕的 if/else 语句，其中包含大量重复的排序。是否有更好（更高性能、更干燥、更易读）的方式来处理所有这些 if/else 语句？

我也不想仅仅连接不同的选项，每个 if 的结果在每种情况下都会非常不同。

var qux = "";

if (foo == 'a') {
    if (bar == 'x') {
        if (baz == 'm') {
            qux = $('#div').html('result 1');
        } else if (baz == 'n') {
            qux = $('#div').html('result 2');
        }
    } else if (bar == 'y') {
        if (baz == 'm') {
            qux = $('#div').html('result 3');
        } else if (baz == 'n') {
            qux = $('#div').html('result 4');
        }
    } else if (bar == 'z') {
        if (baz == 'm') {
            qux = $('#div').html('result 5');
        } else if (baz == 'n') {
            qux = $('#div').html('result 6');
        }
    }
} else if (foo == 'b') {
    if (bar == 'x') {
        if (baz == 'm') {
            qux = $('#div').html('result 7');
        } else if (baz == 'n') {
            qux = $('#div').html('result 8');
        }
    } else if (bar == 'y') {
        if (baz == 'm') {
            qux = $('#div').html('result 9');
        } else if (baz == 'n') {
            qux = $('#div').html('result 10');
        }
    } else if (bar == 'z') {
        if (baz == 'm') {
            qux = $('#div').html('result 11');
        } else if (baz == 'n') {
            qux = $('#div').html('result 12');
        }
    }
} else if (foo == 'c') {
    if (bar == 'x') {
        if (baz == 'm') {
            qux = $('#div').html('result 13');
        } else if (baz == 'n') {
            qux = $('#div').html('result 14');
        }
    } else if (bar == 'y') {
        if (baz == 'm') {
            qux = $('#div').html('result 15');
        } else if (baz == 'n') {
            qux = $('#div').html('result 16');
        }
    } else if (bar == 'z') {
        if (baz == 'm') {
            qux = $('#div').html('result 17');
        } else if (baz == 'n') {
            qux = $('#div').html('result 18');
        }
    }
}

编辑：更改代码以进行澄清。

Answer 1

我会考虑整理您的代码的两个不同选项如下：

1. 一个小变化：鉴于每个案例都执行$("#div").html('result xx')，只需设置：

   if (foo == 'a') {
       if (bar == 'x') {
           if (baz == 'm') {
               qux = 'result 1';
           } else if (baz == 'n') {
               qux = 'result 2';
           }
   // etc.
   

   然后在 if/else 结构之后说：

   if (qux != "") qux = $("#div").html(qux)
   

   至少这样您就不必到处重复$("#div").html() 部分。它仍然是一个巨大而丑陋的 if/else 结构，但如果您的实际代码具有更复杂且不易组合的测试条件组合，则此选项可能有意义。

2. 鉴于您展示的 if/else 示例是基于相同三个变量值的各种组合，您可以将结构替换为查找表，可能类似于以下内容：

   var lookupTable = {
     'a:x:m' : 'result 1',
     'a:x:n' : 'result 2',
     'a:y:m' : 'result 3',
     'a:y:n' : 'result 4',
     //...
     'b:x:m' : 'result 7',
     'b:x:n' : 'result 8',
     // ...
     'c:x:m' : 'result 13',
     'c:x:n' : 'result 14',
     // ...
     'c:z:n' : 'result 18'
   };
   
   var qux = lookupTable[foo + ':' + bar + ':' + baz];
   if (qux) {  // qux will be undefined if foo/bar/baz combination not in table
     $("#div").html(qux);
   }
   

无论哪种方式，您都可以考虑将计算封装在一个函数中，这样它就不会弄乱它周围的代码，留下类似这样的调用：

// other code
var result = calculate(foo, bar, baz);
if (result) $("#div").html(result);
// more other code

(注意：我不明白你为什么要将qux初始化为空字符串，然后在if/else结构中将其设置为.html('some result')的返回值，因为该返回值将是一个jQuery元素这似乎不是字符串的明智替代方案，但无论如何......根据需要包含或不包含代码。）