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 相关文章推荐
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
js实现图片3D轮播效果
Sep 21 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 serialize()与unserialize()的用法
2013/06/05 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
2017/12/11 Javascript
vue-form表单验证是否为空值的实例详解
2019/10/29 Javascript
python框架django基础指南
2016/09/08 Python
Python pass详细介绍及实例代码
2016/11/24 Python
PyQT实现多窗口切换
2018/04/20 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python打开windows应用程序的实例
2019/06/28 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
挂职学习心得体会
2014/09/09 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
辞职信格式范文
2015/05/13 职场文书
2016年教师新年寄语
2015/08/18 职场文书
四年级语文教学反思
2016/03/03 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js