js分解url参数(面向对象-极简主义法应用)


Posted in Javascript onAugust 09, 2012

修改前:

<script type="text/javascript"> 
var url="www.taobao.com?key0=a&key1=b&key2=c"; 
function parseQueryString(url){ 
var str=url.split("?")[1], 
items=str.split("&"); 
var arr,name,value; 
for(var i = 0, l = items.length; i < l; i++){ 
arr=items[i].split("="); 
name= arr[0]; 
value= arr[1]; 
this[name]=value; 
} 
} 
var obj=new parseQueryString(url); 
alert(obj.key1) 
</script>

修改后:
<script type="text/javascript"> 
var url="www.taobao.com?key0=a&key1=b&key2=c"; 
var pQString={ 
createNew:function(url){ 
var str=url.split("?")[1], 
items=str.split("&"); 
var arr,name,value; 
for(var i = 0, l = items.length; i < l; i++){ 
arr=items[i].split("="); 
name= arr[0]; 
value= arr[1]; 
this[name]=value; 
} 
} 
} 
var obj=new pQString.createNew(url); 
alert(obj.key1) 
</script>

感谢 草根程序猿很厉害把这个方法重写了一下,更严密,高效了,最后面在些再学习一下!!!
<script type="text/javascript"> 
function getQueryString(url) { 
if(url) { 
url=url.substr(url.indexOf("?")+1); //字符串截取,比我之前的split()方法效率高 
} 
var result = {}, //创建一个对象,用于存name,和value 
queryString =url || location.search.substring(1), //location.search设置或返回从问号 (?) 开始的 URL(查询部分)。 
re = /([^&=]+)=([^&]*)/g, //正则,具体不会用 
m; 
while (m = re.exec(queryString)) { //exec()正则表达式的匹配,具体不会用 
result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); //使用 decodeURIComponent() 对编码后的 URI 进行解码 
} 
return result; 
} 
// demo 
var myParam = getQueryString("www.taobao.com?key0=a&key1=b&key2=c"); 
alert(myParam.key1); 
</script>

注:
1、substr()与substring(start,stop) ,提取字符串中介于两个指定下标之间的字符。
重要事项:与 slice() 和 substr() 方法不同的是,substring() 不接受负的参数。
参见https://3water.com/w3school/js/jsref_substring.htm
2、location.search.substring(1) ,location.search设置或返回从问号 (?) 开始的 URL(查询部分)。
参见https://3water.com/w3school/htmldom/prop_loc_search.htm
3、exec() 方法用于检索字符串中的正则表达式的匹配。太强大了,还不会用
参考https://3water.com/w3school/js/jsref_exec_regexp.htm
4、使用 decodeURIComponent() 对编码后的 URI 进行解码。
参见https://3water.com/w3school/js/jsref_exec_regexp.htm
Javascript 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
iScroll.js 使用方法参考
May 16 Javascript
Vue.js快速入门教程
Sep 07 Javascript
JS实现类似百叶窗下拉菜单效果
Dec 30 Javascript
详解vue 项目白屏解决方案
Oct 31 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 #Javascript
JS数学函数Exp使用说明
Aug 09 #Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 #Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 #Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 #Javascript
基于jQuery的简单九宫格实现代码
Aug 09 #Javascript
JavaScript基础知识之数据类型
Aug 06 #Javascript
You might like
php获得文件扩展名三法
2006/11/25 PHP
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
jQuery的deferred对象详解
2014/11/12 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
React组件的三种写法总结
2017/01/12 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
three.js 入门案例详解
2018/01/23 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
python图像常规操作
2017/11/11 Python
python的unittest测试类代码实例
2017/12/07 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
python中退出多层循环的方法
2018/11/27 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
五年级数学教学反思
2014/02/11 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
模具专业求职信
2014/06/26 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书