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中的new的使用方法与注意事项
May 16 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
JQuery基础语法小结
Feb 27 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
微信小程序手动添加收货地址省市区联动
May 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
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
2015/07/06 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
js 开发之autocomplete="off"在chrom中失效的解决办法
2017/09/28 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python版本五子棋的实现代码
2018/12/11 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
安全员岗位职责
2013/11/11 职场文书
运动会入场词60字
2014/02/15 职场文书
自主招生推荐信范文
2014/05/10 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书