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 相关文章推荐
用prototype实现的简单小巧的多级联动菜单
Mar 24 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
JavaScript交换两个变量方法实例
Nov 25 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
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
js闭包的用途详解
2014/11/09 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
javascript关于继承解析
2016/05/10 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python中的包和模块实例
2014/11/22 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python机器学习之随机森林(七)
2018/03/26 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
Python grpc超时机制代码示例
2020/09/14 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
2016高中社会实践心得体会范文
2016/01/14 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android