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 动态酷效果实现总结
Dec 27 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
Nov 19 Javascript
js 金额文本框实现代码
Feb 14 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
javascript读写json示例
Apr 11 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
浅析Vue下的components模板使用及应用
Nov 27 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
详解php比较操作符的安全问题
2015/12/03 PHP
解读PHP中上传文件的处理问题
2016/05/29 PHP
js实现最短的XML格式化工具实例
2015/03/12 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Python实现的端口扫描功能示例
2018/04/08 Python
替换python字典中的key值方法
2018/07/06 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python中return如何写
2020/06/18 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
社区清明节活动总结
2014/07/04 职场文书
给妈妈洗脚活动方案
2014/08/16 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
结婚典礼致辞
2015/07/28 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
python 常用的异步框架汇总整理
2021/06/18 Python
《极主夫道》真人电影正式预告 定档6月3日上映
2022/04/05 日漫
golang语言指针操作
2022/04/14 Golang
Win11快速关闭所有广告推荐
2022/04/19 数码科技