本文主要介紹了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作為參數,在該方法就不適用了.
也可以優化方法,將方法轉換為適用於路徑參數的解析與重構,這又是後話了。
相關推薦：
JavaScript入門教學(12) js物件化程式設計_基礎知識
以上是實例詳解js中url物件化管理分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
