js URLパラメータの結合方法の比較_javascriptスキル

最も一般的な方法は次のとおりです:

コードをコピー コードは次のとおりです:

url?arg1=value1&arg2= value2&arg3=value3 ...

このメソッドは最も一般的で一般的で理解しやすいですが、プロジェクト内でその背後にあるパラメーターが変数であり、フィールドが異なる値または異なるセマンティクスを持つ場合、これは実際のところ、パフォーマンスや可読性は高くなく、コードの繰り返しや冗長性が生じやすいです。
たとえば、CGI の次のリクエスト文字列:

コードをコピー コードは次のとおりです:

var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?";
var queryString = "method=2&page=index"; a){ //ホームページのエリア A にアクセスするには、パラメータ subpage
QueryString = "&subpage=a";
}else if(content b){// エリア B にアクセスする場合、パラメータ subpage を b
queryString = "&subpage=b";
}
if(spec_method){
// 表示時に指定されたフィルタリング方法に従いたい場合は、また、パラメータ spec_method
queryString = "&spec_method=1"
}

これは最も一般的な文字列ロジックです。このようなコードでは問題ありませんが、次のように記述します。コメントも面倒だし可読性も高くないし、フィールドの記述もわかりにくく、フィールドを置き換えたり、オリジナルをベースにロジックを変更したりするのは面倒だ。
この問題に対する同僚の解決策を読みました。最初の解決策は、パラメータをオブジェクトの形式で保存し、リクエスト時にパラメータをまとめるメソッドを記述することです。

コードをコピー コードは次のとおりです:

var queryConfig={
"page" : "index",
" method" : 2, //1: メソッド A に従って表示 2: メソッド B に従って表示
"subpage" : -1, //-1: この条件は渡されません a: contentA を表示 b: contentB を表示
"spec_method" :-1 //-1: この条件は通過しません 1: 販売数量に従ってチェックします 2: 時間に従ってチェックします
};
var setQueryConfig = function(){
var _str = "";
for(queryConfig の変数 o){
if(queryConfig[o] != -1){
_str = o "=" queryConfig[o] "&"; >}
}
var _str = _str.substring(0, str.length-1);
return _str;


このメソッドは非常に優れています。利点は、すべてのパラメータが一目でわかることです。すべてがオブジェクト内にリストされ、フィールドのコメントもより詳細になるため、読みやすさと保守性が向上します。ただし、欠点は、コードが大量にあることです。パラメータを結合するには特別なメソッドを追加する必要があります。
別の方法は配列を使用することです:

コードをコピーします コードは次のとおりです: var queryString = [

"method=2", //メソッドフィールドのコメント

"page=index"
];
if(content a){ //領域 A訪問したホームページにはパラメータ subpage
QueryString.concat([
"subpage=a", //subpage annotation
]); を追加する必要があります。else if(content b){//If領域 B にアクセスすると、パラメータのサブページは b
queryString.concat([
"subpage=b", //subpage annotation
]); になるはずです。 {
//表示時に指定されたフィルター方法に従いたい場合は、パラメーター queryString.concat([
"spec_method=2", //spec_method annotation
])
}
queryString = queryString.join("&");


このメソッドはオブジェクト メソッドよりも読みにくくなりますが、保守性も高く、コードも少なくなります。比較的、私はこの方法の方が好きです。
そうですね、昨日のコードレビューがなかったら、このような小さな場所でのコードの最適化を見つけるのに長時間作業しなければならなかったでしょう。コードレビューは自分の能力を高めるためのアクセルのようです（笑）。
この2つの方法は暫定的に見つけたものですので、今後良い方法が見つかったら追加していきます〜。