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 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
JS hashMap实例详解
May 26 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
详解javascript常用工具类的封装
Jan 30 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
js实现拖拽与碰撞检测
Sep 18 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
IIS6的PHP最佳配置方法
2007/03/19 PHP
用PHP实现递归循环每一个目录
2010/08/08 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
详解http访问解析流程原理
2017/10/18 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
深入理解Python对Json的解析
2017/02/14 Python
python 2.7.14安装图文教程
2018/04/08 Python
使用python实现简单五子棋游戏
2019/06/18 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Python和Sublime整合过程图示
2019/12/25 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
消防安全管理制度
2014/02/01 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
跳槽求职信范文
2014/05/26 职场文书
软件售后服务方案
2014/05/29 职场文书
学校安全管理责任书
2014/07/23 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
python 实现图片特效处理
2022/04/03 Python