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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
echarts实现折线图的拖拽效果
Dec 19 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
一些星际专用术语解释
2020/03/04 星际争霸
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JavaScript 乱码问题
2009/08/06 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
python私有属性和方法实例分析
2015/01/15 Python
在Python的Flask框架中使用日期和时间的教程
2015/04/21 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
Python中logging实例讲解
2019/01/17 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
数控技术专业毕业自荐书范文
2014/02/05 职场文书
反腐倡廉演讲稿
2014/05/22 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
机关保密工作承诺书
2015/05/04 职场文书
员工手册编写范本
2015/05/14 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
Python实现简单得递归下降Parser
2022/05/02 Python