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 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
react 国际化的实现代码示例
Sep 14 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
js调用网络摄像头的方法
Dec 05 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
php 全文搜索和替换的实现代码
2008/07/29 PHP
PHP 递归效率分析
2009/11/24 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
仿谷歌主页js动画效果实现代码
2013/07/14 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
python3将变量输入的简单实例
2020/08/19 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书