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学习笔记之jQuery的事件
Dec 22 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
Vue 组件注册全解析
Dec 17 Vue.js
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如何得到当前页和上一页的地址?
2006/11/27 PHP
默默简单的写了一个模板引擎
2007/01/02 PHP
Yii操作数据库的3种方法
2014/03/11 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
Underscore源码分析
2015/12/30 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
档案检查欢迎词
2014/01/13 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
团代会闭幕词
2015/01/28 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL
Python 统计序列中元素的出现频度
2022/04/26 Python