1.問題描述
創(chuàng)新互聯(lián)公司主營豐澤網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),豐澤h5重慶小程序開發(fā)公司搭建,豐澤網(wǎng)站營銷推廣歡迎豐澤等地區(qū)企業(yè)咨詢
url是web編寫過程中一種不可或缺的需要打交道的值,不論是在頁面跳轉(zhuǎn)中,還是ajax請求數(shù)據(jù)或是其他框架插件的url提供.
對(duì)于很多程序猿來說,js中經(jīng)常遇到需要變更url(主要是其中所包含的參數(shù))的情況,大多數(shù)人使用的方法是直接拼接.
這種方法勝在簡單,同樣存在不少不足,如:
拼接形成的url安全性上總是存在潛在的危險(xiǎn);
從某個(gè)完整url中獲取其中所包含的參數(shù)和純地址,以進(jìn)行下一步的比較,也是件較麻煩的事情;
2.解決思路
基于以上問題,我的解決策略是將url進(jìn)行對(duì)象化的管理,將url純地址,url參數(shù)分別放到一個(gè)對(duì)象的各個(gè)屬性中.
每次對(duì)url的變更,可使用先分析為對(duì)象格式,再變更其中某些參數(shù),再組建成為新的url方法.
這樣構(gòu)建再開始做的時(shí)候也許會(huì)覺得有些多此一舉,但在處理一些比較復(fù)雜的情況時(shí),會(huì)非常方便.
3.演示代碼
首先提供分析和組建url的方法(可以考慮將之封裝成一個(gè)方法,方法稱的話可以起的再復(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)然僅展示了比較簡單的情況,可能不能完全體現(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,可以說將url轉(zhuǎn)換功能使用的非常靈活了.
當(dāng)然實(shí)際在使用的時(shí)候,為安全起見,產(chǎn)生一個(gè)新的url通常會(huì)先創(chuàng)建一個(gè)新的對(duì)象,而非在原有對(duì)象基礎(chǔ)上修改.
4.待改進(jìn)的地方
以上情況適用于非路徑參數(shù)的情況下,當(dāng)使用路徑參數(shù)時(shí),如:
www.example.com/admin/product/list/1
這個(gè)1作為參數(shù),在該方法就不適用了.
也可以優(yōu)化方法,將方法轉(zhuǎn)化為適用于路徑參數(shù)的解析與重構(gòu),這又是后話了。
以上就是我們給大家詳細(xì)介紹的關(guān)于JS中URL對(duì)象化管理的全部內(nèi)容，感謝你對(duì)創(chuàng)新互聯(lián)的支持。
