js中url對(duì)象化管理分析

更新時(shí)間：2017年12月29日 08:40:16 作者：楊意社

這篇文章主要介紹了js中url對(duì)象化管理的相關(guān)知識(shí)以及用法介紹，有需要的朋友跟著小編一起學(xué)習(xí)下。

1.問(wèn)題描述

url是web編寫(xiě)過(guò)程中一種不可或缺的需要打交道的值,不論是在頁(yè)面跳轉(zhuǎn)中,還是ajax請(qǐng)求數(shù)據(jù)或是其他框架插件的url提供.
對(duì)于很多程序猿來(lái)說(shuō),js中經(jīng)常遇到需要變更url(主要是其中所包含的參數(shù))的情況,大多數(shù)人使用的方法是直接拼接.
這種方法勝在簡(jiǎn)單,同樣存在不少不足,如:

拼接形成的url安全性上總是存在潛在的危險(xiǎn);

從某個(gè)完整url中獲取其中所包含的參數(shù)和純地址,以進(jìn)行下一步的比較,也是件較麻煩的事情;

2.解決思路

基于以上問(wèn)題,我的解決策略是將url進(jìn)行對(duì)象化的管理,將url純地址,url參數(shù)分別放到一個(gè)對(duì)象的各個(gè)屬性中.
每次對(duì)url的變更,可使用先分析為對(duì)象格式,再變更其中某些參數(shù),再組建成為新的url方法.
這樣構(gòu)建再開(kāi)始做的時(shí)候也許會(huì)覺(jué)得有些多此一舉,但在處理一些比較復(fù)雜的情況時(shí),會(huì)非常方便.

3.演示代碼

首先提供分析和組建url的方法(可以考慮將之封裝成一個(gè)方法,方法稱的話可以起的再?gòu)?fù)雜些以避免重復(fù)):

/**
 * 數(shù)據(jù)處理-解析url為一個(gè)對(duì)象
 */
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;
}
/**
 * 數(shù)據(jù)處理-構(gòu)成/組建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;
}

以下是用法示例,當(dāng)然僅展示了比較簡(jiǎn)單的情況,可能不能完全體現(xiàn)url對(duì)象化管理的威力:

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);

打印結(jié)果為:

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,可以說(shuō)將url轉(zhuǎn)換功能使用的非常靈活了.

當(dāng)然實(shí)際在使用的時(shí)候,為安全起見(jiàn),產(chǎn)生一個(gè)新的url通常會(huì)先創(chuàng)建一個(gè)新的對(duì)象,而非在原有對(duì)象基礎(chǔ)上修改.

4.待改進(jìn)的地方

以上情況適用于非路徑參數(shù)的情況下,當(dāng)使用路徑參數(shù)時(shí),如: