Question

我有3块代码可以正常工作，但每个代码都略有不同。我想将所有这些压缩成一个代码块。我知道属性开始于和属性结束，但这有点复杂，不知道我是如何应用它的。

如你所见，我有： accountFirewawallFilter，globalFirewallFilter和firewallFilter。

function toggleType(field, initial){
switch($("#accountFirewallFilter_"+field+"Type").val()){
  case "any":
    $("#accountFirewallFilter_"+field+"").parent().show();
    $("#accountFirewallFilter_"+field+"").prop('disabled', true);
    $("#accountFirewallFilter_"+field+"").prop('name', "accountFirewallFilter["+field+"]");
    $("#accountFirewallFilter_"+field+"").val(null);
    $("#accountFirewallFilter_"+field+"Options").parent().hide();
    $("#accountFirewallFilter_"+field+"Options").prop('name', "accountFirewallFilter["+field+"Options]");
    break;
  case "address":
    $("#accountFirewallFilter_"+field+"").parent().show();
    $("#accountFirewallFilter_"+field+"").prop('disabled', false);
    $("#accountFirewallFilter_"+field+"").prop('name', "accountFirewallFilter["+field+"]");
    if(!initial){
      $("#accountFirewallFilter_"+field+"").val(null);
    }
    $("#accountFirewallFilter_"+field+"Options").parent().hide();
    $("#accountFirewallFilter_"+field+"Options").prop('name', "accountFirewallFilter["+field+"Options]");
    break;
  case "network":
    $("#accountFirewallFilter_"+field+"").parent().hide();
    $("#accountFirewallFilter_"+field+"").prop('disabled', true);
    $("#accountFirewallFilter_"+field+"").prop('name', "accountFirewallFilter["+field+"Disabled]");
    $("#accountFirewallFilter_"+field+"Options").parent().show();
    $("#accountFirewallFilter_"+field+"Options").prop('name', "accountFirewallFilter["+field+"]");

    // Used to load the "+field+" into the dropdown on edit
    if($("#accountFirewallFilter_"+field+"").val()){
      $("#accountFirewallFilter_"+field+"Options").val($("#accountFirewallFilter_"+field+"").val());
    }

    break;
}
}

toggleType('source', true);
toggleType('destination', true);
// $("[id$='Filter_sourceType']").change(function(){ toggleType('source', false); });
// $("[id$='Filter_destinationType']").change(function(){ toggleType('destination', false); });

// function toggleType(field, initial){
// switch($("#globalFirewallFilter_"+field+"Type").val()){
//   case "any":
//     $("#globalFirewallFilter_"+field+"").parent().show();
//     $("#globalFirewallFilter_"+field+"").prop('disabled', true);
//     $("#globalFirewallFilter_"+field+"").prop('name', "globalFirewallFilter["+field+"]");
//     $("#globalFirewallFilter_"+field+"").val(null);
//     $("#globalFirewallFilter_"+field+"Options").parent().hide();
//     $("#globalFirewallFilter_"+field+"Options").prop('name', "globalFirewallFilter["+field+"Options]");
//     break;
//   case "address":
//     $("#globalFirewallFilter_"+field+"").parent().show();
//     $("#globalFirewallFilter_"+field+"").prop('disabled', false);
//     $("#globalFirewallFilter_"+field+"").prop('name', "globalFirewallFilter["+field+"]");
//     if(!initial){
//       $("#globalFirewallFilter_"+field+"").val(null);
//     }
//     $("#globalFirewallFilter_"+field+"Options").parent().hide();
//     $("#globalFirewallFilter_"+field+"Options").prop('name', "globalFirewallFilter["+field+"Options]");
//     break;
//   case "network":
//     $("#globalFirewallFilter_"+field+"").parent().hide();
//     $("#globalFirewallFilter_"+field+"").prop('disabled', true);
//     $("#globalFirewallFilter_"+field+"").prop('name', "globalFirewallFilter["+field+"Disabled]");
//     $("#globalFirewallFilter_"+field+"Options").parent().show();
//     $("#globalFirewallFilter_"+field+"Options").prop('name', "globalFirewallFilter["+field+"]");

//     // Used to load the "+field+" into the dropdown on edit
//     if($("#globalFirewallFilter_"+field+"").val()){
//       $("#globalFirewallFilter_"+field+"Options").val($("#globalFirewallFilter_"+field+"").val());
//     }

//     break;
// }
// }

// toggleType('source', true);
// toggleType('destination', true);

// $("[id$='Filter_sourceType']").change(function(){ toggleType('source', false); });
// $("[id$='Filter_destinationType']").change(function(){ toggleType('destination', false); });

// function toggleType(field, initial){
// switch($("#firewallFilter_"+field+"Type").val()){
//   case "any":
//     $("#firewallFilter_"+field+"").parent().show();
//     $("#firewallFilter_"+field+"").prop('disabled', true);
//     $("#firewallFilter_"+field+"").prop('name', "firewallFilter["+field+"]");
//     $("#firewallFilter_"+field+"").val(null);
//     $("#firewallFilter_"+field+"Options").parent().hide();
//     $("#firewallFilter_"+field+"Options").prop('name', "firewallFilter["+field+"Options]");
//     break;
//   case "address":
//     $("#firewallFilter_"+field+"").parent().show();
//     $("#firewallFilter_"+field+"").prop('disabled', false);
//     $("#firewallFilter_"+field+"").prop('name', "firewallFilter["+field+"]");
//     if(!initial){
//       $("#firewallFilter_"+field+"").val(null);
//     }
//     $("#firewallFilter_"+field+"Options").parent().hide();
//     $("#firewallFilter_"+field+"Options").prop('name', "firewallFilter["+field+"Options]");
//     break;
//   case "network":
//     $("#firewallFilter_"+field+"").parent().hide();
//     $("#firewallFilter_"+field+"").prop('disabled', true);
//     $("#firewallFilter_"+field+"").prop('name', "firewallFilter["+field+"Disabled]");
//     $("#firewallFilter_"+field+"Options").parent().show();
//     $("#firewallFilter_"+field+"Options").prop('name', "firewallFilter["+field+"]");

//     // Used to load the "+field+" into the dropdown on edit
//     if($("#firewallFilter_"+field+"").val()){
//       $("#firewallFilter_"+field+"Options").val($("#firewallFilter_"+field+"").val());
//     }

//     break;
// }
// }

Answer 1

似乎每个代码块中唯一不同的是以下名称：

accountFirewallFilter
firewallFilter
globalFirewallFilter

考虑到这一点，您可以创建第三个filter参数，您可以在其中将这三个项目作为值。

function toggleType(field, initial, filter) {
 switch($("#"+filter+"_"+field+"Type").val()) {
  case "any":
    $("#"+filter+"_"+field+"").parent().show();
    $("#"+filter+"_"+field+"").prop('disabled', true);
    $("#"+filter+"_"+field+"").prop('name', filter+"["+field+"]");
    $("#"+filter+"_"+field+"").val(null);
    $("#"+filter+"_"+field+"Options").parent().hide();
    $("#"+filter+"_"+field+"Options").prop('name', filter+"["+field+"Options]");
    break;
  case "address":
    ...
 }
}

然后将每个值作为参数（我们甚至可以将其转换为循环，数组中的三个项重复source和destination）：

toogleType('source', true, "accountFirewallFilter");
toogleType('destination', true, "accountFirewallFilter");
toogleType('source', true, "firewallFilter");
toogleType('destination', true, "firewallFilter");
toogleType('source', true, "globalFirewallFilter");
toogleType('destination', true, "globalFirewallFilter");

Answer 2

简化上述代码的一种方法是将switch替换为对象映射。

创建一个对象，比如说map将案例字符串作为键映射到执行该键的相关操作的函数
然后使用map[$("#accountFirewallFilter_"+field+"Type").val()](field);执行与field。

如上所述将开关转换为地图的简短示例：

<强>切换

switch(input) {
    case "hello":
        alert('You said hello');
        break;

    case "goodbye":
        alert('You said goodbye');
        break;
}

或者用一个用作地图的对象表示开关

// Defining the map - the case strings are the 'keys' and the required behaviours are the 'values'
var map = {
    hello: function(option) { alert('You said hello.  ' + 'Option for this func = ' + option); },
    goodbye: function(option) { alert('You said goodbye.  ' + 'Option for this func = ' + option); }
}; 

map[input]('option'); // Call required function

但请注意，您应该使用地图方法进行检查input（如上例所示）实际上存在于map中，否则您将调用undefined。此检查相当于在default语句中提供switch个案例。

使用地图执行此操作的方式可以说更清晰，更容易阅读和编辑每种情况下发生的事情 - 但是，这当然会因意见而异。

使用JQuery压缩Javascript条件块

2 个答案: