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 闭包
Sep 15 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
Aug 24 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
加速vue组件渲染之性能优化
Apr 09 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下对数组进行排序的函数
2010/08/08 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
Javascript Object.extend
2010/05/18 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
Python输出各行命令详解
2018/02/01 Python
Python随机函数random()使用方法小结
2018/04/29 Python
Python实现读取txt文件并转换为excel的方法示例
2018/05/17 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
酒店led欢迎词
2014/01/09 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2015年技术员工作总结
2015/04/10 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
Python基础之进程详解
2021/05/21 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫