js URL參數(shù)的拼接方法比較
更新時(shí)間:2012年02月15日 18:39:03 作者:
請(qǐng)求的URL后面帶參數(shù)在項(xiàng)目中是很常見(jiàn)的,常用在的地方比如跳轉(zhuǎn)到新頁(yè)面或者請(qǐng)求CGI等
最常見(jiàn)的方式就是:
這樣的方式最常見(jiàn)最普通也最容易理解,但是在項(xiàng)目中,如果后面帶的參數(shù)可變而且字段有不同的值或者不同的語(yǔ)義時(shí),這樣的方式可維護(hù)性和可讀性其實(shí)并不高,而且代碼也容易重復(fù)或者冗余。
比如下面的一個(gè)對(duì)CGI的請(qǐng)求串:
var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?";
var queryString = "method=2&page=index";
if(content a){ //訪問(wèn)的首頁(yè)的區(qū)域A,需要加參數(shù)subpage
queryString += "&subpage=a";
}else if(content b){//如果訪問(wèn)了區(qū)域B,則參數(shù)subpage要變?yōu)閎
queryString += "&subpage=b";
}
if(spec_method){
//如果查看的時(shí)候要按照指定的篩選方法,則還需要加參數(shù)spec_method
queryString += "&spec_method=1"
}
這是最常見(jiàn)的拼串邏輯了,這樣的代碼是沒(méi)有什么問(wèn)題,但是寫(xiě)注釋很麻煩,而且可讀性也不高,字段說(shuō)明也不明確,如果需要更換一個(gè)字段或在原來(lái)的基礎(chǔ)上更改邏輯都比較麻煩。
我參看了一些同事關(guān)于這個(gè)問(wèn)題的解決方案,第一種是將參數(shù)用對(duì)象的形式存起來(lái),然后再寫(xiě)一個(gè)方法在請(qǐng)求時(shí)將參數(shù)拼起來(lái):
var queryConfig={
"page" : "index",
"method" : 2, //1:按照方法A查看 2:按照方法B查看
"subpage" : -1, //-1:此條件不傳遞 a:查看contentA b:查看contentB
"spec_method" :-1 //-1:此條件不傳遞 1:按照銷(xiāo)量高低查 2:按照時(shí)間查
};
var setQueryConfig = function(){
var _str = "";
for(var o in queryConfig){
if(queryConfig[o] != -1){
_str += o + "=" + queryConfig[o] + "&";
}
}
var _str = _str.substring(0, str.length-1);
return _str;
}
這個(gè)方法是挺不錯(cuò)的,優(yōu)點(diǎn)就是將所有參數(shù)一目了然的在對(duì)象中全部列出來(lái),注釋也可以針對(duì)字段更詳細(xì),可讀性和維護(hù)性都得到了提高;但是缺點(diǎn)就是代碼有點(diǎn)多,還需要專(zhuān)門(mén)加一個(gè)方法來(lái)組合參數(shù)。
另外有一個(gè)方法是用數(shù)組的方法:
var queryString = [
"method=2", //method字段的注釋
"page=index"
];
if(content a){ //訪問(wèn)的首頁(yè)的區(qū)域A,需要加參數(shù)subpage
queryString.concat([
"subpage=a", //subpage注釋
]);
}else if(content b){//如果訪問(wèn)了區(qū)域B,則參數(shù)subpage要變?yōu)閎
queryString.concat([
"subpage=b", //subpage注釋
]);
}
if(spec_method){
//如果查看的時(shí)候要按照指定的篩選方法,則還需要加參數(shù) queryString.concat([
"spec_method=2", //spec_method注釋
]);
}
queryString = queryString.join("&");
這個(gè)方法可讀性可能比對(duì)象的方法差一些,但是維護(hù)性也比較高,代碼量也比較少。相對(duì)來(lái)說(shuō)這個(gè)方法我還比較喜歡。
恩恩,要不是昨天的代碼評(píng)審,這樣小的地方的代碼優(yōu)化我是要工作很久之后才能發(fā)現(xiàn)的??磥?lái)代碼評(píng)審對(duì)自身能力提高是加速劑吖,哈哈。
這兩個(gè)方法是我暫時(shí)發(fā)現(xiàn)的,要是后續(xù)再發(fā)現(xiàn)什么好方法,再補(bǔ)充進(jìn)來(lái)~
復(fù)制代碼 代碼如下:
url?arg1=value1&arg2=value2&arg3=value3...
這樣的方式最常見(jiàn)最普通也最容易理解,但是在項(xiàng)目中,如果后面帶的參數(shù)可變而且字段有不同的值或者不同的語(yǔ)義時(shí),這樣的方式可維護(hù)性和可讀性其實(shí)并不高,而且代碼也容易重復(fù)或者冗余。
比如下面的一個(gè)對(duì)CGI的請(qǐng)求串:
復(fù)制代碼 代碼如下:
var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?";
var queryString = "method=2&page=index";
if(content a){ //訪問(wèn)的首頁(yè)的區(qū)域A,需要加參數(shù)subpage
queryString += "&subpage=a";
}else if(content b){//如果訪問(wèn)了區(qū)域B,則參數(shù)subpage要變?yōu)閎
queryString += "&subpage=b";
}
if(spec_method){
//如果查看的時(shí)候要按照指定的篩選方法,則還需要加參數(shù)spec_method
queryString += "&spec_method=1"
}
這是最常見(jiàn)的拼串邏輯了,這樣的代碼是沒(méi)有什么問(wèn)題,但是寫(xiě)注釋很麻煩,而且可讀性也不高,字段說(shuō)明也不明確,如果需要更換一個(gè)字段或在原來(lái)的基礎(chǔ)上更改邏輯都比較麻煩。
我參看了一些同事關(guān)于這個(gè)問(wèn)題的解決方案,第一種是將參數(shù)用對(duì)象的形式存起來(lái),然后再寫(xiě)一個(gè)方法在請(qǐng)求時(shí)將參數(shù)拼起來(lái):
復(fù)制代碼 代碼如下:
var queryConfig={
"page" : "index",
"method" : 2, //1:按照方法A查看 2:按照方法B查看
"subpage" : -1, //-1:此條件不傳遞 a:查看contentA b:查看contentB
"spec_method" :-1 //-1:此條件不傳遞 1:按照銷(xiāo)量高低查 2:按照時(shí)間查
};
var setQueryConfig = function(){
var _str = "";
for(var o in queryConfig){
if(queryConfig[o] != -1){
_str += o + "=" + queryConfig[o] + "&";
}
}
var _str = _str.substring(0, str.length-1);
return _str;
}
這個(gè)方法是挺不錯(cuò)的,優(yōu)點(diǎn)就是將所有參數(shù)一目了然的在對(duì)象中全部列出來(lái),注釋也可以針對(duì)字段更詳細(xì),可讀性和維護(hù)性都得到了提高;但是缺點(diǎn)就是代碼有點(diǎn)多,還需要專(zhuān)門(mén)加一個(gè)方法來(lái)組合參數(shù)。
另外有一個(gè)方法是用數(shù)組的方法:
復(fù)制代碼 代碼如下:
var queryString = [
"method=2", //method字段的注釋
"page=index"
];
if(content a){ //訪問(wèn)的首頁(yè)的區(qū)域A,需要加參數(shù)subpage
queryString.concat([
"subpage=a", //subpage注釋
]);
}else if(content b){//如果訪問(wèn)了區(qū)域B,則參數(shù)subpage要變?yōu)閎
queryString.concat([
"subpage=b", //subpage注釋
]);
}
if(spec_method){
//如果查看的時(shí)候要按照指定的篩選方法,則還需要加參數(shù) queryString.concat([
"spec_method=2", //spec_method注釋
]);
}
queryString = queryString.join("&");
這個(gè)方法可讀性可能比對(duì)象的方法差一些,但是維護(hù)性也比較高,代碼量也比較少。相對(duì)來(lái)說(shuō)這個(gè)方法我還比較喜歡。
恩恩,要不是昨天的代碼評(píng)審,這樣小的地方的代碼優(yōu)化我是要工作很久之后才能發(fā)現(xiàn)的??磥?lái)代碼評(píng)審對(duì)自身能力提高是加速劑吖,哈哈。
這兩個(gè)方法是我暫時(shí)發(fā)現(xiàn)的,要是后續(xù)再發(fā)現(xiàn)什么好方法,再補(bǔ)充進(jìn)來(lái)~
相關(guān)文章
javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng)
這篇文章主要介紹了javascript實(shí)現(xiàn)文字無(wú)縫滾動(dòng),文字可以實(shí)現(xiàn)上下滾動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12小程序使用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法詳解
這篇文章主要介紹了小程序使用watch監(jiān)聽(tīng)數(shù)據(jù)變化的方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)
這篇文章主要介紹了JS如何遍歷帶有子集的數(shù)組集合(嵌套數(shù)組)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06JavaScript如何向頁(yè)面中添加一個(gè)按鈕
這篇文章主要介紹了JavaScript如何向頁(yè)面中添加一個(gè)按鈕,使用兩種方式向頁(yè)面中添加一個(gè)按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10微信小程序之 catalog 切換實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序之 catalog 切換實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09