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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
探寻JavaScript中this指针指向
Apr 23 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python sys.argv用法实例
2015/05/28 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python使用re模块验证危险字符
2020/05/21 Python
解决python运行启动报错问题
2020/06/01 Python
解决python对齐错误的方法
2020/07/16 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
致400米运动员广播稿
2014/02/07 职场文书
进口业务员岗位职责
2014/04/06 职场文书
购房意向书
2014/08/30 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
六年级作文之预言作文
2019/10/25 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android