欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js中url對象化管理分析

 更新時間:2017年12月29日 08:40:16   作者:楊意社  
這篇文章主要介紹了js中url對象化管理的相關(guān)知識以及用法介紹,有需要的朋友跟著小編一起學習下。

1.問題描述

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

拼接形成的url安全性上總是存在潛在的危險;

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

2.解決思路

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

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ù)處理-構(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;
}

以下是用法示例,當然僅展示了比較簡單的情況,可能不能完全體現(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);

打印結(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)換功能使用的非常靈活了.

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

4.待改進的地方

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

www.example.com/admin/product/list/1

這個1作為參數(shù),在該方法就不適用了.

也可以優(yōu)化方法,將方法轉(zhuǎn)化為適用于路徑參數(shù)的解析與重構(gòu),這又是后話了。

以上就是我們給大家詳細介紹的關(guān)于JS中URL對象化管理的全部內(nèi)容,感謝你對腳本之家的支持。

相關(guān)文章

  • uni-app使用swiper實現(xiàn)輪播圖的方法

    uni-app使用swiper實現(xiàn)輪播圖的方法

    做音樂播放器小程序時,因為swiper的問題耽誤不少時間,所以下面這篇文章主要給大家介紹了關(guān)于uni-app使用swiper實現(xiàn)輪播圖的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • firefox插件Firebug的使用教程

    firefox插件Firebug的使用教程

    Firebug是Firefox下的一款開發(fā)類插件,現(xiàn)屬于Firefox的五星級強力推薦插件之一。
    2010-01-01
  • javascript 網(wǎng)站常用的iframe分割

    javascript 網(wǎng)站常用的iframe分割

    就是一個頁面使用兩個iframe來調(diào)用內(nèi)容,實現(xiàn)頁面導航,更容易控制,可控制性好
    2008-06-06
  • 15分鐘深入了解JS繼承分類、原理與用法

    15分鐘深入了解JS繼承分類、原理與用法

    這篇文章主要介紹了JS繼承分類、原理與用法,結(jié)合實例形式較為詳細的總結(jié)分析了javascript原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、原型式繼承、寄生式繼承和寄生組合式繼承等相關(guān)原理及使用方法,需要的朋友可以參考下
    2019-01-01
  • 淺析JavaScript中瀏覽器的兼容問題

    淺析JavaScript中瀏覽器的兼容問題

    下面小編就為大家?guī)硪黄獪\析JavaScript中瀏覽器的兼容問題。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考
    2016-04-04
  • JavaScript生成GUID的多種算法小結(jié)

    JavaScript生成GUID的多種算法小結(jié)

    這篇文章介紹了GUID的幾種生成算法,有需要的朋友可以參考一下
    2013-08-08
  • 解決js中的setInterval清空定時器不管用問題

    解決js中的setInterval清空定時器不管用問題

    這篇文章主要介紹了解決js中的setInterval清空定時器不管用問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • javascript css float屬性的特殊寫法

    javascript css float屬性的特殊寫法

    使用js操作css屬性的寫法是有一定的規(guī)律的
    2008-11-11
  • 分享JavaScript的?3?種工廠模式的用法

    分享JavaScript的?3?種工廠模式的用法

    這篇文章主要分享JavaScript的?3?種工廠模式,工廠模式是設(shè)計模式中最常用的設(shè)計模式之一,這種類型的設(shè)計模式屬于創(chuàng)建型模式,它提供了一種創(chuàng)建對象的最佳方式,下文關(guān)于工廠模式的更多相關(guān)資料需要的小伙伴可以參考一下
    2022-04-04
  • 理解javascript對象繼承

    理解javascript對象繼承

    這篇文章主要幫助大家理解javascript對象繼承,先從一個問題出發(fā),引入javascript對象繼承相關(guān)知識,感興趣的小伙伴們可以參考一下
    2016-04-04

最新評論