js中url對象化管理分析

2024-05-06 16:41:40

字體：大中小

來源：轉載

供稿：網友

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

打印結果為:

shangpin1www.example.com/admin/product/main?group_code=test_group&p_code=shangpin2www.example.com/admin/product/main?p_code=shangpin2&user_name=%E7%94%A8%3F%26%3D%E6%88%B7用?&=戶

以上情況,特別是情況3,可以說將url轉換功能使用的非常靈活了.

當然實際在使用的時候,為安全起見,產生一個新的url通常會先創建一個新的對象,而非在原有對象基礎上修改.

4.待改進的地方

以上情況適用于非路徑參數的情況下,當使用路徑參數時,如: