脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js中url对象化管理知识分享

js中url对象化管理分析

 更新时间：2017年12月29日 08:40:16   作者：杨意社  
这篇文章主要介绍了js中url对象化管理的相关知识以及用法介绍，有需要的朋友跟着小编一起学习下。

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对象化管理的全部内容，感谢你对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • uni-app使用swiper实现轮播图的方法

    uni-app使用swiper实现轮播图的方法

    做音乐播放器小程序时,因为swiper的问题耽误不少时间,所以下面这篇文章主要给大家介绍了关于uni-app使用swiper实现轮播图的相关资料,需要的朋友可以参考下
    2022-11-11
  • firefox插件Firebug的使用教程

    firefox插件Firebug的使用教程

    Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。
    2010-01-01
  • javascript 网站常用的iframe分割

    javascript 网站常用的iframe分割

    就是一个页面使用两个iframe来调用内容，实现页面导航，更容易控制，可控制性好
    2008-06-06
  • 15分钟深入了解JS继承分类、原理与用法

    15分钟深入了解JS继承分类、原理与用法

    这篇文章主要介绍了JS继承分类、原理与用法,结合实例形式较为详细的总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承等相关原理及使用方法,需要的朋友可以参考下
    2019-01-01
  • 浅析JavaScript中浏览器的兼容问题

    浅析JavaScript中浏览器的兼容问题

    下面小编就为大家带来一篇浅析JavaScript中浏览器的兼容问题。小编觉得挺不错的，现在分享给大家，也给大家做个参考
    2016-04-04
  • JavaScript生成GUID的多种算法小结

    JavaScript生成GUID的多种算法小结

    这篇文章介绍了GUID的几种生成算法，有需要的朋友可以参考一下
    2013-08-08
  • 解决js中的setInterval清空定时器不管用问题

    解决js中的setInterval清空定时器不管用问题

    这篇文章主要介绍了解决js中的setInterval清空定时器不管用问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • javascript css float属性的特殊写法

    javascript css float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的
    2008-11-11
  • 分享JavaScript的 3 种工厂模式的用法

    分享JavaScript的 3 种工厂模式的用法

    这篇文章主要分享JavaScript的 3 种工厂模式,工厂模式是设计模式中最常用的设计模式之一，这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式，下文关于工厂模式的更多相关资料需要的小伙伴可以参考一下
    2022-04-04
  • 理解javascript对象继承

    理解javascript对象继承

    这篇文章主要帮助大家理解javascript对象继承，先从一个问题出发，引入javascript对象继承相关知识，感兴趣的小伙伴们可以参考一下
    2016-04-04

最新评论