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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
Feb 13 Javascript
React实现动效弹窗组件
Jun 21 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php文本转图片自动换行的方法
2013/03/13 PHP
探讨php中header的用法详解
2013/06/07 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
JSON+JavaScript处理JSON的简单例子
2013/03/20 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
javascript实现页面滚屏效果
2017/01/17 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
2018/09/14 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
化验室技术员岗位职责
2013/12/24 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
结婚幸福感言
2015/08/01 职场文书
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python