Comparison of splicing methods of js URL parameters_javascript skills-JS Tutorial-php.cn

Comparison of splicing methods of js URL parameters_javascript skills

WBOY

Release： 2016-05-16 17:56:13

Original

1421 people have browsed it

The most common way is:

Copy code The code is as follows:

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

This method is the most common, common and easiest to understand, but in the project, if the parameters behind it are variable and the fields have different values or different semantics, this method can be maintained In fact, the performance and readability are not high, and the code is easy to be repeated or redundant.
For example, the following request string for CGI:

Copy code The code is as follows:

 
var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?"; 
var queryString = "method=2&page=index"; 
if(content a){ //To access area A of the home page, you need to add the parameter subpage 
 QueryString = "&subpage=a"; 
}else if(content b){//If area B is accessed, the parameter subpage needs to be changed to b 
　queryString = "&subpage=b"; 
} 
if(spec_method){ 
　//If you want to follow the specified filtering method when viewing, you also need to add the parameter spec_method 
queryString = "&spec_method=1" 
} 

This is the most common string string logic. There is no problem with such code, but writing comments is troublesome and the readability is not high. The field descriptions are also unclear, and it would be troublesome to replace a field or change the logic based on the original.
I read some colleagues’ solutions to this problem. The first one is to store the parameters in the form of objects, and then write a method to put the parameters together when requesting:

Copy code The code is as follows:

 
var queryConfig={ 
"page" : "index", 
"method" : 2, //1: View according to method A 2: View according to method B 
"subpage" : -1, //-1: This condition is not passed a: View contentA b: View contentB 
"spec_method" :-1 //-1: This condition is not passed 1: Check according to sales volume 2: Check according to time 
}; 
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; 
} 

This method is quite good, the advantage is that all parameters are clear at a glance All are listed in the object, and the comments can also be more detailed for the fields, which improves readability and maintainability; but the disadvantage is that there is a lot of code, and a special method needs to be added to combine the parameters.
Another method is to use an array:

Copy the code The code is as follows:

 
var queryString = [ 
"method=2", //Comments on the method field
"page=index" 
]; 
if(content a){ //Area A of the visited homepage , need to add parameter subpage 
 QueryString.concat([ 
"subpage=a", //subpage annotation
]); 
}else if(content b){//If area B is accessed , then the parameter subpage should become b 
　queryString.concat([ 
"subpage=b", //subpage annotation
]); 
} 
if(spec_method){ 
 //If you want to follow the specified filtering method when viewing, you also need to add the parameter queryString.concat([ 
"spec_method=2", //spec_method annotation
]); 
} 
queryString = queryString.join("&"); 

This method may be less readable than the object method, but it is also more maintainable and has less code. Relatively speaking, I prefer this method.
Well, if it weren’t for yesterday’s code review, I would have had to work for a long time to discover the code optimization in such a small place. It seems that code review is an accelerator for improving one's own abilities, haha.
These two methods are what I have discovered temporarily. If I find any good methods later, I will add them~