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
判断一个变量是数组Array类型的方法
Sep 16 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
JavaScript中如何判断一个值的类型
Sep 15 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
js数组去重的方法总结
Jan 18 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP输出时间差函数代码
2013/01/28 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
使用jquery的ajax需要注意的地方dataType的设置
2013/08/12 Javascript
Node.js文件操作详解
2014/08/16 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
vue.js实现单选框、复选框和下拉框示例
2017/07/18 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python3+PyQt5 数据库编程--增删改实例
2019/06/17 Python
pytorch打印网络结构的实例
2019/08/19 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
自考毕业生自我鉴定
2013/11/04 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
读书活动总结
2014/04/28 职场文书
2015年党建工作总结
2015/03/30 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
《废话连篇——致新手》——chinapizza
2022/04/05 无线电