我如何防止jquery中的代碼重複？

我必須在我的頁面中多次使用同一個jQuery代碼塊。只更改selector名稱和url參數。我如何防止jquery中的代碼重複？

我的代碼看起來是這樣的：

$(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。

希望有人可以幫助我。謝謝。

來源

2016-09-07 user3733831

創建一個函數，它的ID和urlFragment參數 – jedifans

@ jedifans，你能向我示範一個例子嗎？ – user3733831

更好地在[CodeReview.SE]（https://codereview.stackexchange.com/）中詢問。 –

提取普通代碼的函數：

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'); 
    }); 
});

來源

2016-09-07 06:10:16 jedifans

你能告訴我爲什麼它使用'encodeURIComponent' – user3733831

永遠不要相信用戶輸入。用戶可能已經把＆放在表單域中，這會導致＆cat = the＆st＆mth = 2'。 'encodeURIComponent（）'轉義任何'＆'字符和更多。 – jedifans

嘗試將普通的東西移出一個函數。

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

然後在變化的功能將是：

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

另外，你也可以把所有的聽衆一個功能齊全

[編輯]這是一個好習慣中添加;您的發言結束

來源

2016-09-07 05:57:42

他也可以把'twin'元素id放在data-attribute上，例如#year元素''select id =「year」class =「general」data-element =「category」/>然後可以把一個事件監聽器，並通過data屬性獲取其他元素。 – naortor

也許你可以做這樣的：

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; 
    }); 
});

來源

2016-09-07 06:08:18 baba

我如何防止jquery中的代碼重複？

回答

相關問題