Javascript jQuery中的重构函数

我对JQuery很陌生，但谷歌目前是我构建代码的最好朋友。下面的代码有点冗长，我想知道a）我是否用了正确的方法（一切都很好）和b）有没有更好的方法？我确信有更简单的方法来实现我所需要的，但是我编写的代码做了它所需要的。我想我只是想对我所学到的东西提出批评

$(window).load(function() {
    window.$order = "GetData.asp";
    GetData();
    window.$ord == '';
    $("#descn").hide();         
    $("#desc").hide();          
    $("#desct").hide();         
});
$("#asc").click(function(){
    window.$order = "GetData.asp?order=asc";
    GetData();
    $("#desc").show();  
    $("#asc").hide();   
});
$("#desc").click(function(){
    window.$order = "GetData.asp?order=desc"
    GetData();
    $("#desc").hide();  
    $("#asc").show();
});
$("#ascn").click(function(){
    window.$order = "GetData.asp?no=asc";
    GetData();
    $("#descn").show(); 
    $("#ascn").hide();  
});
$("#descn").click(function(){
    window.$order = "GetData.asp?no=desc"
    GetData();
    $("#descn").hide(); 
    $("#ascn").show();  
});
$("#asct").click(function(){
    window.$order = "GetData.asp?test=asc";
    GetData();
    $("#desct").show(); 
    $("#asct").hide();  
});
$("#desct").click(function(){
    window.$order = "GetData.asp?test=desc"
    GetData();
    $("#desct").hide(); 
    $("#asct").show();  
});
function GetData() {
    $.getJSON(window.$order, function(data){
    if (data[0].name == 'none') {
        $('#output').html("<div id='alert'>None Available</div>");
    } else {
        var len = data.length;
        html = '<table class="tbl small">'
        $time = 0
        for (var i = 0; i< len; i++) {

            $time = (parseInt($time)+parseInt(data[i].time));
            if (data[i].overdue == "Yes") {
                html = html + '<tr style="background: #FF0000">'
            } else if (data[i].status == "RE ASSES") {
                html = html + '<tr style="background: #D0C0C0">'
            } else{
                html = html + '<tr>'
            }
            html = html + '<td class="border col1">'+data[i].line+'</td>'
            html = html + '<td class="border col2">'+data[i].no+'</td>'
            html = html + '<td class="border col3">'+data[i].desc+'</td>'           
            html = html + '<td class="border col4">'+data[i].loc+'</td>'            
            html = html + '<td class="border col5">'+data[i].time+'</td>'           
            html = html + '<td class="border col6">'+data[i].lastcal+'</td>'            
            html = html + '<td class="border col7">'+data[i].frequency+'</td>'          
            html = html + '<td class="border col8">'+data[i].status+'</td>' 
            if (data[i].external == "E" ) {
                html = html + '<td class="border col9">&#10004;</td>'   
            } else {
                html = html + '<td class="border col9"></td>'
            }
            html = html + '</tr>'           
            }
        html = html + '</table>'
        $('#output').html(html);
        var monthNames = ["January", "February", "March", "April", "May", "June",
          "July", "August", "September", "October", "November", "December"
        ];
        var d = new Date();
        $('#tottime').html('Total time outstanding for ' + monthNames[d.getMonth()] + ' : ' + $time);
    }
    });
}

$（窗口）.load（函数（）{
window.$order=“GetData.asp”；
GetData（）；
窗口。$ord=''；
$（“#descn”）.hide（）；
$（“#desc”）.hide（）；
$（“#desct”）.hide（）；
});
$（“#asc”）。单击（函数（）{
window.$order=“GetData.asp？order=asc”；
GetData（）；
$（“#desc”）.show（）；
$（“#asc”）.hide（）；
});
$（“#desc”）。单击（函数（）{
window.$order=“GetData.asp？order=desc”
GetData（）；
$（“#desc”）.hide（）；
$（“#asc”）.show（）；
});
$（“#ascn”）。单击（函数（）{
window.$order=“GetData.asp？no=asc”；
GetData（）；
$（“#descn”）.show（）；
$（“#ascn”）.hide（）；
});
$（“#descn”）。单击（函数（）{
window.$order=“GetData.asp？no=desc”
GetData（）；
$（“#descn”）.hide（）；
$（“#ascn”）.show（）；
});
$（“#asct”）。单击（函数（）{
window.$order=“GetData.asp？test=asc”；
GetData（）；
$（“#desct”）.show（）；
$（“#asct”）.hide（）；
});
$（“#描述”）。单击（函数（）{
window.$order=“GetData.asp？test=desc”
GetData（）；
$（“#desct”）.hide（）；
$（“#asct”）.show（）；
});
函数GetData（）{
$.getJSON（窗口.$order，函数（数据）{
如果（数据[0]。名称==“无”）{
$（'#output'）.html（“无可用”）；
}否则{
var len=data.length；
html=“”
$time=0
对于（变量i=0；i

我唯一担心的是，我做的事情很长，例如#asc click函数——我不确定是否有更好的方法实现这一点，而不为每个click方法使用函数

还有,；在for循环中，我不得不用if-else手动设置背景颜色，因为只是尝试使用。css（'background'，'red'）不起作用，但我在这里所做的却起了作用

---

非常感谢您抽出时间，请随时指出任何问题。

您可以通过使用HTML5

数据

属性来最小化代码。比如说,

 <a href="javascript:;" class="order-cls" data-order="asc" data-hide-property="descn" data-show-property="ascn">Link</a>

---

希望它能对您有所帮助。

有一种更好的方法可以做到这一点，Sagar（使用html5数据属性）已经描述了这一点

这一切都可以在没有ID选择器的情况下完成，而URL不应该通过全局变量传递给GetData（），而是通过一个参数：

GetData（URL）

无论如何，这里有一个简短的代码版本。。。是不是更好。。。不，除非是你自己写的，否则很可能是不可读的：D

var params = {
    "": 'order',
    "n": 'no',
    "t": 'test'
};

$('#asc, #desc, #ascn, #descn, #asct, #desct').on('click', function(event){
    var $this = $(this),
        id = $this.attr('id'),
        order = id.substr(0,1) == 'a' ? id.substr(0,3) : id.substr(0,4), // asc or desc
        type = id.substr(type=='asc'?3:4,1), // "", "t" or "n"
        param = params[type];
    window.$order = ['GetData.asp?',param,'=',order].join('');
    GetData();
    $('#desc' + type)[type=='asc'?'show':'hide']();
    $('#asc' + type)[type=='desc'?'show':'hide']();
});

我不知道您是否需要为它使用
.load（）
方法，因为它等待首先加载所有内容。相反，jQuery确实有一个名为
.ready（）
的方法，它只需要准备好DOM（文档对象模型），这样您就可以利用它，并且可以像这样重构它：

var myApp = myApp || {}; // use this to stop polluting the global scope
    myApp.GetData = function(){
       $.getJSON(myApp.$order, function(data){
           if (data[0].name == 'none') {
               $('#output').html("<div id='alert'>None Available</div>");
           } else {
              var len = data.length,
                 html = '<table class="tbl small">',
                $time = 0;
              for (var i = 0; i< len; i++) {
                  $time = (parseInt($time)+parseInt(data[i].time));
                  if (data[i].overdue == "Yes") {
                      html = html + '<tr style="background: #FF0000">'
                  } else if (data[i].status == "RE ASSES") {
                      html = html + '<tr style="background: #D0C0C0">'
                  } else{
                     html = html + '<tr>'
                  }
                 html = html + '<td class="border col1">'+data[i].line+'</td>'
                 html = html + '<td class="border col2">'+data[i].no+'</td>'
                 html = html + '<td class="border col3">'+data[i].desc+'</td>'           
                 html = html + '<td class="border col4">'+data[i].loc+'</td>'            
                html = html + '<td class="border col5">'+data[i].time+'</td>'           
                html = html + '<td class="border col6">'+data[i].lastcal+'</td>'            
                html = html + '<td class="border col7">'+data[i].frequency+'</td>'          
                html = html + '<td class="border col8">'+data[i].status+'</td>' 
                if (data[i].external == "E" ) {
                   html = html + '<td class="border col9">&#10004;</td>'   
                } else {
                   html = html + '<td class="border col9"></td>'
                }
                   html = html + '</tr>'           
               }
                  html = html + '</table>'
                  $('#output').html(html);
                  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                  var d = new Date();
                  $('#tottime').html('Total time outstanding for ' + 
                             monthNames[d.getMonth()] + ' : ' + $time);
                }
        });
    };

$(function(){ //<----shorter way of writing $(document).ready(fn)
    // Note: you should bind your events like click, change etc in this block
    myApp.$order = "GetData.asp"; // now you can put in your custom var myApp
    myApp.GetData();
    myApp.$ord == '';
    $("#descn, #desc, #desct").hide(); // you can use this way to hide but 
                                       // better to hide with css like
                                       // #descn, #desc, #desct{display:none;}

    $("#asc, #desc, #ascn, #descn, #asct, #desct").click(function(){
        if(this.id === "asc"){
           myApp.$order = "GetData.asp?order=asc";
           $("#desc").show();  
           $("#asc").hide();
        }else if(this.id === "desc"){
           myApp.$order = "GetData.asp?order=desc";
           $("#desc").hide();  
           $("#asc").show();
        }else if(this.id === "ascn"){
           myApp.$order = "GetData.asp?no=asc";
           $("#descn").show(); 
           $("#ascn").hide();
        }else if(this.id === "descn"){
           myApp.$order = "GetData.asp?no=desc";
           $("#descn").hide(); 
           $("#ascn").show();
        }else if(this.id === "asct"){
           myApp.$order = "GetData.asp?test=asc";
           $("#desct").show(); 
           $("#asct").hide();
        }else if(this.id === "desct"){
           myApp.$order = "GetData.asp?test=desc";
           $("#desct").hide(); 
           $("#asct").show();
        }  

        myApp.GetData(); // <---you can call this function here now.

    });

});

var myApp=myApp | |{}；//用它来阻止全球范围的污染
myApp.GetData=函数（）{
$.getJSON（myApp.$order，函数（数据）{
如果（数据[0]。名称==“无”）{
$（'#output'）.html（“无可用”）；
}否则{
var len=data.length，
html=“”，
$time=0；
对于（变量i=0；ivar myApp = myApp || {}; // use this to stop polluting the global scope
    myApp.GetData = function(){
       $.getJSON(myApp.$order, function(data){
           if (data[0].name == 'none') {
               $('#output').html("<div id='alert'>None Available</div>");
           } else {
              var len = data.length,
                 html = '<table class="tbl small">',
                $time = 0;
              for (var i = 0; i< len; i++) {
                  $time = (parseInt($time)+parseInt(data[i].time));
                  if (data[i].overdue == "Yes") {
                      html = html + '<tr style="background: #FF0000">'
                  } else if (data[i].status == "RE ASSES") {
                      html = html + '<tr style="background: #D0C0C0">'
                  } else{
                     html = html + '<tr>'
                  }
                 html = html + '<td class="border col1">'+data[i].line+'</td>'
                 html = html + '<td class="border col2">'+data[i].no+'</td>'
                 html = html + '<td class="border col3">'+data[i].desc+'</td>'           
                 html = html + '<td class="border col4">'+data[i].loc+'</td>'            
                html = html + '<td class="border col5">'+data[i].time+'</td>'           
                html = html + '<td class="border col6">'+data[i].lastcal+'</td>'            
                html = html + '<td class="border col7">'+data[i].frequency+'</td>'          
                html = html + '<td class="border col8">'+data[i].status+'</td>' 
                if (data[i].external == "E" ) {
                   html = html + '<td class="border col9">&#10004;</td>'   
                } else {
                   html = html + '<td class="border col9"></td>'
                }
                   html = html + '</tr>'           
               }
                  html = html + '</table>'
                  $('#output').html(html);
                  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                  var d = new Date();
                  $('#tottime').html('Total time outstanding for ' + 
                             monthNames[d.getMonth()] + ' : ' + $time);
                }
        });
    };

$(function(){ //<----shorter way of writing $(document).ready(fn)
    // Note: you should bind your events like click, change etc in this block
    myApp.$order = "GetData.asp"; // now you can put in your custom var myApp
    myApp.GetData();
    myApp.$ord == '';
    $("#descn, #desc, #desct").hide(); // you can use this way to hide but 
                                       // better to hide with css like
                                       // #descn, #desc, #desct{display:none;}

    $("#asc, #desc, #ascn, #descn, #asct, #desct").click(function(){
        if(this.id === "asc"){
           myApp.$order = "GetData.asp?order=asc";
           $("#desc").show();  
           $("#asc").hide();
        }else if(this.id === "desc"){
           myApp.$order = "GetData.asp?order=desc";
           $("#desc").hide();  
           $("#asc").show();
        }else if(this.id === "ascn"){
           myApp.$order = "GetData.asp?no=asc";
           $("#descn").show(); 
           $("#ascn").hide();
        }else if(this.id === "descn"){
           myApp.$order = "GetData.asp?no=desc";
           $("#descn").hide(); 
           $("#ascn").show();
        }else if(this.id === "asct"){
           myApp.$order = "GetData.asp?test=asc";
           $("#desct").show(); 
           $("#asct").hide();
        }else if(this.id === "desct"){
           myApp.$order = "GetData.asp?test=desc";
           $("#desct").hide(); 
           $("#asct").show();
        }  

        myApp.GetData(); // <---you can call this function here now.

    });

});