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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
Apr 07 Javascript
JS跨域问题详解
Nov 25 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
详解vue 图片上传功能
Apr 30 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 jQuery
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
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
js获取url参数的使用扩展实例
2007/12/29 Javascript
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
举例讲解Python中is和id的用法
2015/04/03 Python
Python简单计算文件夹大小的方法
2015/07/14 Python
Python字符串格式化输出方法分析
2016/04/13 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python 反向输出字符串的方法
2018/07/16 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python构造IP报文实例
2020/05/05 Python
python创建文本文件的简单方法
2020/08/30 Python
详解html5 canvas常用api总结(二)--绘图API
2016/12/14 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
夜班门卫岗位职责
2013/12/09 职场文书
公司总经理岗位职责
2014/03/15 职场文书
公开服务承诺制度
2014/03/26 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
员工辞退通知书
2015/04/17 职场文书
小学生运动会广播
2015/08/19 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs