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实现点击页面计算点击次数
Jan 23 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
vuejs点击class变化的实例
Sep 05 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
jquery实现简单每周轮换的日历
Sep 10 jQuery
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 strtok()函数的优点分析
2010/03/02 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php实现网站留言板功能
2015/11/04 PHP
设定php简写功能的方法
2019/11/28 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
关于this和self的使用说明
2010/08/01 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
深入理解JavaScript中的对象
2015/06/04 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
JavaScript实现短信倒计时60s
2017/10/09 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Apache如何部署django项目
2017/05/21 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
英国著名药妆店:Superdrug
2021/02/13 全球购物
采购员岗位职责
2013/11/15 职场文书
班级安全教育实施方案
2014/02/23 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
建筑管理专业求职信
2014/07/28 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
python中的装饰器该如何使用
2021/06/18 Python
mysql如何配置白名单访问
2021/06/30 MySQL