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学习4 浏览器的事件模型
Feb 07 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 Javascript
js querySelector() 使用方法
Dec 21 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
vue实现搜索过滤效果
May 28 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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+Ajax实现表单验证的详解
2013/06/25 PHP
深入分析PHP引用(&)
2014/09/04 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jQuery操作DOM之获取表单控件的值
2015/01/23 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Django 开发环境配置过程详解
2019/07/18 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
巴西女装购物网站:Eclectic
2018/04/24 全球购物
当当网软件测试笔试题
2015/11/24 面试题
介绍一下Ruby的特点
2013/01/20 面试题
办公室内勤工作职责
2013/12/11 职场文书
大学活动策划书范文
2014/01/10 职场文书
出差报告格式模板
2014/11/06 职场文书
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android