如何防止 jquery 中的代码重复？答案

【问题标题】：How I prevent code duplication in jquery?如何防止 jquery 中的代码重复？
【发布时间】：2016-09-07 05:52:20
【问题描述】：

我必须在我的页面中多次使用相同的jQuery 代码块。仅更改 selector 名称和 url 参数。

我的代码如下所示：

$(document).ready(function () {  
  $("#year").change(function() {
    var url = ''; 
    var c = $("#category").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=summery"+url;  
  })

  $("#category").change(function() {
    var url = ''; 
    var c = $(this).val();
    var d = $("#year").val();
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=summery"+url;  
  })
});


$(document).ready(function () {  
  $("#year2").change(function() {
    var url = ''; 
    var c = $("#category2").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=card"+url;  
  })

  $("#category2").change(function() {
    var url = ''; 
    var c = $(this).val();
    var d = $("#year2").val();
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=card"+url;  
  })
});

$(document).ready(function () {  
  $("#year3").change(function() {
    var url = ''; 
    var c = $("#category3").val(); 
    var d = $(this).val(); 
    if(c.trim().length) { url+='&cat='+c } 
    if(d.trim().length) { url+='&mth='+d } 
    location.href="?p=chart"+url;  
  })

  $("#category3").change(function() {
    var url = ''; 
    var c = $(this).val();
    var d = $("#year3").val();
    if(d.trim().length) { url+='&mth='+d } 
    if(c.trim().length) { url+='&cat='+c } 
    location.href="?p=chart"+url;  
  })
});

有很多代码重复。我的问题是，任何机构都可以帮助我防止这种代码重复。原因是，对于很多 selectors 和 urls，我必须使用此代码块。

希望有人可以帮助我。谢谢你。

【问题讨论】：

创建一个接受 ID 和 urlFragment 参数的函数
@jedifans，你能给我举个例子吗？
最好在CodeReview.SE提问。

标签： javascript jquery code-duplication

【解决方案1】：

将常用代码提取成函数：

function navigateBasedOnInput(monthInput, categoryInput, urlFragment) {
    var url = '',
          category = $(categoryInput).val(),
          month = $(monthInput).val();

    if (category.trim().length) {
        url += '&cat=' + encodeURIComponent(category);
    }
    if (month.trim().length) {
        url += '&mth=' + encodeURIComponent(month);
    }

    location.href = "?p=" + encodeURIComponent(urlFragment) + url;
}

$(document).ready(function () {
    $("#year, #category").change(function() {
        navigateBasedOnInput('#year', '#category', 'summery');
    });

    $("#year2, #category2").change(function() {
        navigateBasedOnInput('#year2', '#category2', 'card');
    });

    $("#year3, #category3").change(function() {
        navigateBasedOnInput('#year3', '#category3', 'chart');
    });
});

【讨论】：

永远不要相信用户输入。用户可能在表单字段中输入了 &，这将导致 &cat=the&st&mth=2。 encodeURIComponent() 转义任何 & 字符和更多字符。

【解决方案2】：

尝试将常见的东西移到一个函数中。

function commonFunc(c, d, pStr) {
    var url = '';
    if (d.trim().length) {
        url+='&mth='+d;
    } 
    if (c.trim().length) { 
        url+='&cat='+c;
    } 
    return pStr+url;
}

那么在change函数中就是：

$("#year").change(function() {
    var c = $("#category").val(); 
    var d = $(this).val(); 
    location.href = commonFunc(c, d, '?p=chart');  
  });

此外，您还可以将所有侦听器放在一个就绪函数中

[编辑] 添加是一个好习惯；到你的陈述结束

【讨论】：

他还可以将“双胞胎”元素 id 放在数据属性上，例如放在 #year 元素上 `

【解决方案3】：

也许你可以这样做：

var urls={
  year1:"",
  year2:"",
  year3:""
};
["year1","year2","year3"].forEach(function(e){
    var self = $("#"+e);
    self.change(function(){
        var url = urls[e], 
        c = self.val(),
        d = $(this).val(); 
        if(c.trim().length) { url+='&cat='+c } 
        if(d.trim().length) { url+='&mth='+d } 
        location.href="?p=card"+url;  
    });
});

【讨论】：