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

次のような条件でスイッチケース構造を使用できます。

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

OK、あなたが本当にたくさんのifsを持っていて、あなたtのsが固定整数であり、主な目標があなたの多くの「ルール」の読みやすさであると仮定します。次に、次のことを試すことができます。

まず、すべてのsに有効な値があることを確認しt、未定義のケースをスキップします。変数tが数値ではなく実際の論理値である場合、明示的なルールのみを使用します（たとえば、t1 == 0を使用する代わりに>, <, >=, <=）、特に。if実装するルールがステートメントで表現されているものと同じくらい多様である場合。

次に、読みやすさのために小数を使用するなど、数値システムを使用してロジックをエンコードできます。それぞれについてt、ロジックをエンコードする新しい「ロジック番号」の小数点以下1桁を使用します。

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"

しかし、私はそれがよりよく読むのでスイッチケースを好むでしょう。これがあなたが達成したかったことだといいのですが。:)

このフィドルで、この10進ロジックの実行バージョンを確認できます。

乾杯、ユヴェントス

于 2012-10-20T20:27:37.683 に答える
1

これは機能するはずです：

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

これは、tXの「truthy / false」値に依存しています（0は偽、1〜3は真です。「truthy / false」の詳細については、 http ：//11heavens.com/falsy-and-truthy-in-javascriptを参照してください）。 ）。

このアプローチの唯一の注意点は、、、およびがすべてゼロ以外の場合に可能selectorになることです。'div.b_class.c_class.d_class't1t2t3

selectorこの場合に受け入れられない場合は、t3条件をに変更してif (t3 && !(t1 || t2))ください。

t3条件がに変更された場合、追加できるif (t3 && !(t1 || t2))唯一の方法は、がゼロ以外であり、両方がゼロである場合です。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比較を1つだけ削除し、読みにくくなるためです）。

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 に答える
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 に答える