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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
JQuery live函数
Dec 24 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
各种常用的JS函数整理
Oct 25 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
深入浅析react native es6语法
Dec 09 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
快速解决vue-cli不能初始化webpack模板的问题
Mar 20 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 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和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
Vue-cli@3.0 插件系统简析
2018/09/05 Javascript
js实现前面自动补全位数的方法
2018/10/10 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python制作简易注册登录系统
2016/12/15 Python
Python三级菜单的实例
2017/09/13 Python
numpy数组拼接简单示例
2017/12/15 Python
如何利用Python识别图片中的文字
2020/05/31 Python
Python打印不合法的文件名
2020/07/31 Python
python实现发送邮件
2021/03/02 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
高中生学习的自我评价
2013/12/14 职场文书
社区健康教育实施方案
2014/03/18 职场文书
五分钟演讲稿
2014/04/30 职场文书
师德师风自我评价范文
2014/09/11 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
七一晚会主持词
2015/06/29 职场文书
教师远程培训心得体会
2016/01/09 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS