js URL参数的拼接方法比较


Posted in Javascript onFebruary 15, 2012

最常见的方式就是:

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"; 
if(content 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(var o in queryConfig){ 
if(queryConfig[o] != -1){ 
_str += o + "=" + queryConfig[o] + "&"; 
} 
} 
var _str = _str.substring(0, str.length-1); 
return _str; 
}

这个方法是挺不错的,优点就是将所有参数一目了然的在对象中全部列出来,注释也可以针对字段更详细,可读性和维护性都得到了提高;但是缺点就是代码有点多,还需要专门加一个方法来组合参数。

另外有一个方法是用数组的方法:

var queryString = [ 
"method=2", //method字段的注释 
"page=index" 
]; 
if(content a){ //访问的首页的区域A,需要加参数subpage 
queryString.concat([ 
"subpage=a", //subpage注释 
]); 
}else if(content b){//如果访问了区域B,则参数subpage要变为b 

queryString.concat([ 
"subpage=b", //subpage注释 
]); 
} 
if(spec_method){ 

//如果查看的时候要按照指定的筛选方法,则还需要加参数 queryString.concat([ 
"spec_method=2", //spec_method注释 
]); 
} 
queryString = queryString.join("&");

这个方法可读性可能比对象的方法差一些,但是维护性也比较高,代码量也比较少。相对来说这个方法我还比较喜欢。
恩恩,要不是昨天的代码评审,这样小的地方的代码优化我是要工作很久之后才能发现的。看来代码评审对自身能力提高是加速剂吖,哈哈。
这两个方法是我暂时发现的,要是后续再发现什么好方法,再补充进来~
Javascript 相关文章推荐
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 28 Javascript
javascript题目,重写函数让其无限相加
Feb 15 #Javascript
用JQUERY增删元素的代码
Feb 14 #Javascript
修改jQuery Validation里默认的验证方法
Feb 14 #Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 #Javascript
js 金额文本框实现代码
Feb 14 #Javascript
jQuery UI Autocomplete 体验分享
Feb 14 #Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 #Javascript
You might like
PHP安全技术之 实现php基本安全
2010/09/04 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php中explode与split的区别介绍
2012/10/03 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
php实现登陆模块功能示例
2016/10/20 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
JavaScript网页定位详解
2014/01/13 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python处理字符串之isspace()方法的使用
2015/05/19 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
3分钟演讲稿
2014/04/30 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
工程质检员岗位职责
2015/04/08 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python