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学习笔记-详解in运算符
Sep 13 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue-cli项目无法用本机IP访问的解决方法
Sep 20 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
JS实现简单日历特效
Jan 03 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
构建简单的Webmail系统
2006/10/09 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php中file_exists函数使用详解
2015/05/08 PHP
动态表格Table类的实现
2009/08/26 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
jQuery $命名冲突解决方案汇总
2014/11/13 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
python异步任务队列示例
2014/04/01 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
波兰在线杂货店:Polski Koszyk
2019/11/02 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
百度JavaScript笔试题
2015/01/15 面试题
写好自荐信的技巧
2013/11/08 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2016春节家属慰问信
2015/03/25 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
小学英语听课心得体会
2016/01/14 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL