js中url对象化管理分析


Posted in Javascript onDecember 29, 2017

1.问题描述

url是web编写过程中一种不可或缺的需要打交道的值,不论是在页面跳转中,还是ajax请求数据或是其他框架插件的url提供.
对于很多程序猿来说,js中经常遇到需要变更url(主要是其中所包含的参数)的情况,大多数人使用的方法是直接拼接.
这种方法胜在简单,同样存在不少不足,如:

拼接形成的url安全性上总是存在潜在的危险;

从某个完整url中获取其中所包含的参数和纯地址,以进行下一步的比较,也是件较麻烦的事情;

2.解决思路

基于以上问题,我的解决策略是将url进行对象化的管理,将url纯地址,url参数分别放到一个对象的各个属性中.
每次对url的变更,可使用先分析为对象格式,再变更其中某些参数,再组建成为新的url方法.
这样构建再开始做的时候也许会觉得有些多此一举,但在处理一些比较复杂的情况时,会非常方便.

3.演示代码

首先提供分析和组建url的方法(可以考虑将之封装成一个方法,方法称的话可以起的再复杂些以避免重复):

/**
 * 数据处理-解析url为一个对象
 */
function parseUrl(strUrl){
	var arrUrlPart=strUrl.split('?');
	var strUrl=arrUrlPart[0];
	var mUrl={
		url:strUrl
	};
	if(arrUrlPart.length===2){
		var strParam=arrUrlPart[1];
		var arrParamPart=strParam.split('&');
		for(i in arrParamPart){
			var strParamPart=arrParamPart[i];
			var arrParamKy=strParamPart.split('=');
			var strKey=arrParamKy[0];
			var strValue=decodeURIComponent(arrParamKy[1]);
			mUrl[strKey]=strValue;
		}
	}
	return mUrl;
}
/**
 * 数据处理-构成/组建url(字符串)
 */
function concatUrl(mUrl){
	var strUrl=mUrl.url;
	var strParam='';
	for(strKey in mUrl){
		if(strKey==='url'||mUrl[strKey]===null)
			continue;
		strParam+=(strKey+'='+encodeURIComponent(mUrl[strKey])+'&');//注入避免
	}
	if(strParam!==''){
		strParam=('?'+strParam.substring(0,strParam.length-1));
	}
	return strUrl+strParam;
}

以下是用法示例,当然仅展示了比较简单的情况,可能不能完全体现url对象化管理的威力:

var strUrl1='www.example.com/admin/product/main?group_code=test_group&p_code=shangpin1';
var mUrl1=parseUrl(strUrl1);
console.log(mUrl1.p_code);
mUrl1.p_code='shangpin2';
var strUrl2=concatUrl(mUrl1);
console.log(strUrl2);
mUrl1.group_code=null;
mUrl1.user_name='用?&=户';
var strUrl3=concatUrl(mUrl1);
console.log(strUrl3);
var mUrl3=parseUrl(strUrl3);
console.log(mUrl3.user_name);

打印结果为:

shangpin1
www.example.com/admin/product/main?group_code=test_group&p_code=shangpin2
www.example.com/admin/product/main?p_code=shangpin2&user_name=%E7%94%A8%3F%26%3D%E6%88%B7
用?&=户

以上情况,特别是情况3,可以说将url转换功能使用的非常灵活了.

当然实际在使用的时候,为安全起见,产生一个新的url通常会先创建一个新的对象,而非在原有对象基础上修改.

4.待改进的地方

以上情况适用于非路径参数的情况下,当使用路径参数时,如:

www.example.com/admin/product/list/1

这个1作为参数,在该方法就不适用了.

也可以优化方法,将方法转化为适用于路径参数的解析与重构,这又是后话了。

以上就是我们给大家详细介绍的关于JS中URL对象化管理的全部内容,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
js实现按座位号抽奖
Apr 05 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JS计算距当前时间的时间差实例
Dec 29 #Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 #Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 #Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 #Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 #Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 #Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 #Javascript
You might like
thinkphp实现like模糊查询实例
2014/10/29 PHP
php中上传文件的的解决方案
2018/09/25 PHP
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
JS回调函数深入理解
2019/10/16 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
Python heapq使用详解及实例代码
2017/01/25 Python
用Python设计一个经典小游戏
2017/05/15 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python3安装speech语音模块的方法
2018/12/24 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
2014年教师节座谈会发言稿
2014/09/10 职场文书
个人查摆剖析材料
2014/10/04 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
副总经理岗位职责
2015/02/02 职场文书
事业单位个人总结
2015/02/12 职场文书
工商局个人工作总结
2015/03/03 职场文书
年度考核个人总结
2015/03/06 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书