1.問題描述
創(chuàng)新互聯(lián)公司主營豐澤網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,APP應用開發(fā),豐澤h5重慶小程序開發(fā)公司搭建,豐澤網(wǎng)站營銷推廣歡迎豐澤等地區(qū)企業(yè)咨詢
url是web編寫過程中一種不可或缺的需要打交道的值,不論是在頁面跳轉中,還是ajax請求數(shù)據(jù)或是其他框架插件的url提供.
對于很多程序猿來說,js中經(jīng)常遇到需要變更url(主要是其中所包含的參數(shù))的情況,大多數(shù)人使用的方法是直接拼接.
這種方法勝在簡單,同樣存在不少不足,如:
拼接形成的url安全性上總是存在潛在的危險;
從某個完整url中獲取其中所包含的參數(shù)和純地址,以進行下一步的比較,也是件較麻煩的事情;
2.解決思路
基于以上問題,我的解決策略是將url進行對象化的管理,將url純地址,url參數(shù)分別放到一個對象的各個屬性中.
每次對url的變更,可使用先分析為對象格式,再變更其中某些參數(shù),再組建成為新的url方法.
這樣構建再開始做的時候也許會覺得有些多此一舉,但在處理一些比較復雜的情況時,會非常方便.
3.演示代碼
首先提供分析和組建url的方法(可以考慮將之封裝成一個方法,方法稱的話可以起的再復雜些以避免重復):
/** * 數(shù)據(jù)處理-解析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; } /** * 數(shù)據(jù)處理-構成/組建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; }
以下是用法示例,當然僅展示了比較簡單的情況,可能不能完全體現(xiàn)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轉換功能使用的非常靈活了.
當然實際在使用的時候,為安全起見,產(chǎn)生一個新的url通常會先創(chuàng)建一個新的對象,而非在原有對象基礎上修改.
4.待改進的地方
以上情況適用于非路徑參數(shù)的情況下,當使用路徑參數(shù)時,如:
www.example.com/admin/product/list/1
這個1作為參數(shù),在該方法就不適用了.
也可以優(yōu)化方法,將方法轉化為適用于路徑參數(shù)的解析與重構,這又是后話了。
以上就是我們給大家詳細介紹的關于JS中URL對象化管理的全部內(nèi)容,感謝你對創(chuàng)新互聯(lián)的支持。
當前文章:js中url對象化管理分析
鏈接URL:http://muchs.cn/article26/ghjdjg.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、移動網(wǎng)站建設、小程序開發(fā)、網(wǎng)站改版、虛擬主機、動態(tài)網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)