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中的delete操作符详细介绍
Jun 06 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
详解tween.js的使用教程
Sep 14 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
vue.js循环radio的实例
Nov 07 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 Javascript
手把手教你从零开始react+antd搭建项目
Jun 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
虚拟主机中对PHP的特殊设置
2006/10/09 PHP
PHP中的CMS的涵义
2007/03/11 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
js更优雅的兼容
2010/08/12 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
2015/06/09 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
2016/05/24 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python获取交互式ssh shell的方法
2019/02/14 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
实验室标语
2014/06/21 职场文书
公证委托书
2014/08/01 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
化工生产实习心得体会
2016/01/22 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫