我的代码包含很多多个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();
有没有办法简化这些陈述?
答案 0 :(得分:3)
您可以使用具有以下条件的开关案例结构:
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;
}
答案 1 :(得分:1)
好的,假设你真的有很多if
s,你的t
是固定整数,
并且主要目标是您的许多“规则”的可读性。然后你可以尝试以下方法。
首先,我要确保所有t
都具有有效值并跳过未定义的情况。
如果变量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
下面的开关案例实现了你的逻辑。它是您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"
但我更喜欢切换机箱,因为它读得更好。 我希望这是你想要实现的目标。 :)
您可以在this fiddle中查看此十进制逻辑的运行版本。
干杯, 尤文
答案 2 :(得分:1)
这应该有效:
var selector = 'div';
if (t1) {
selector += '.b_class';
}
if (t2) {
selector += '.c_class';
}
if (t3) {
selector += '.d_class';
}
$(selector).fadeIn();
它依赖于tX的“truthy / falsy”值(0为假,1-3为真,请参阅http://11heavens.com/falsy-and-truthy-in-javascript以获取有关“truthy / falsy”的更多详细信息。)
此方法的唯一警告是selector
,'div.b_class.c_class.d_class'
和{{1}允许t1
为t2
都是非零的。
如果在这种情况下不接受t3
,请将selector
条件更改为t3
。
当if (t3 && !(t1 || t2))
条件修改为t3
时,if (t3 && !(t1 || t2))
附加selector
的唯一方式是d_class
非零且两者{ {1}}和t3
为零。
t1
<强>更新强>
最初的答案是我怀疑OP实际上的意图(因为OP意味着代码是假设的),所以感谢Juve发现它。为了满足cbayram,这将复制OP的逻辑(虽然我不确定你是否可以称之为“简化”,因为它只删除了一个t2
比较并且更难以阅读)。
var selector = 'div';
if (t1) {
selector += '.b_class';
}
if (t2) {
selector += '.c_class';
}
if (t3 && !(t1 || t2)) { //modified conditional
selector += '.d_class';
}
$(selector).fadeIn();
这里有一个小提琴:http://jsfiddle.net/dX7AK/
答案 3 :(得分: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>
在任何一种情况下,这都是测试您的修改与原始修改的好方法。