ホームページ > 記事 > ウェブフロントエンド > jsでのURLオブジェクト管理の詳細な分析例

jsでのURLオブジェクト管理の詳細な分析例

小云云オリジナル: 2017-12-29 14:09:401153ブラウズ

この記事では主に、js での URL オブジェクト管理の関連知識と使用法を紹介します。必要な友達はエディターに従って一緒に学ぶことができます。皆さんのお役に立てれば幸いです。

1. 問題の説明

url は、ページジャンプ、Ajax リクエストデータ、その他のフレームワークプラグイン URL のいずれであっても、Web 作成プロセスで処理する必要がある不可欠な値です。
多くのプログラムでは一般的に、 js では、URL (主に URL に含まれるパラメーター) を変更する必要がある状況によく遭遇します。ほとんどの人が使用する方法は、単純であるという点では優れていますが、次のような多くの欠点もあります。

スプライシングによって形成された URL のセキュリティには常に潜在的な危険が存在します。

次の比較ステップで完全な URL に含まれるパラメータと純粋なアドレスを取得することも面倒です。

上記の問題に基づいて、私の解決策は、URL をオブジェクト化し、URL の純粋なアドレスと URL パラメーターをオブジェクトのさまざまな属性に入れることです。

URL が変更されるたびに、最初にオブジェクト形式を使用できます。次に、いくつかのパラメータを変更して、それを新しい URL メソッドに構築します
このように構築して実行すると、少し不要に感じるかもしれませんが、さらにいくつかの処理を行うときに非常に便利です。

3. デモコード

まず、URL を分析して構築する方法を提供します (重複を避けるために、メソッド名をより複雑にすることもできます)。もちろん、以下は使用例です。比較的単純な状況のみが示されており、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;
}

出力結果は次のとおりです:

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

上記のケース、特にケース 3 では、それはURL 変換機能は非常に柔軟であると言えます。

もちろん、実際の使用では、安全のため、通常、新しい URL を生成するときは、元のオブジェクトを変更するのではなく、最初に新しいオブジェクトが作成されます

。 4. 改善の余地

上記の状況は、パス以外のパラメーターの場合、次のようなパスパラメーターを使用する場合に当てはまります。

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
用?&=户

この 1 がパラメーターとして使用されるため、この方法は適用されません。

メソッドを最適化し、メソッドをパスパラメータに適した解析および解析メソッドに変換することもできますが、これは別の話です。

jsでのURLオブジェクト管理の詳細な分析例

関連記事