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 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
JQuery验证工具类搜集整理
Jan 16 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
js数组去重的方法汇总
Jul 29 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
微信小程序云开发之数据库操作
May 18 Javascript
JavaScript 作用域实例分析
Oct 02 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面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JavaScript函数、方法、对象代码
2008/10/29 Javascript
javascript XMLHttpRequest对象全面剖析
2010/04/24 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
店长助理岗位职责
2013/12/13 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
购房委托书范本
2014/09/18 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
初婚未育证明样本
2014/10/24 职场文书
保证书格式
2015/01/16 职场文书
慰问信模板
2015/02/14 职场文书
2015年团支部工作总结
2015/04/03 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS