jsでオブジェクトベースのURL管理を実装する方法

この記事では、js での URL オブジェクト管理の関連知識と使い方を主に紹介します。必要な友達は一緒に学ぶことができます。

1. 問題の説明

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

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

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

2解決策のアイデア上記の問題に基づいて、私の解決策は 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;
}

以下は使用例です。もちろん、これは比較的単純な状況を示しているだけであり、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
用?&=户

上記URL 変換機能は非常に柔軟に使用できます

もちろん、実際に使用する場合は、安全のため、新しい URL を生成するときに、通常は新しいオブジェクトが作成されます。

4 .改善すべき箇所

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

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

この 1 はパラメータとして使用されます。 、このメソッドは適用できません。

メソッドを最適化することもでき、メソッドをパス パラメーターに適した解析と再構成に変換することは、また後の話になります。

上記は私があなたのためにまとめたものです。

関連記事:

mui フレームワークの部分を超えてオフキャンバス側がスライドする問題

vue2.0 で better-scroll を使用してモバイル スライドを実現する方法

cli+ を使用した関連領域Vue の mui スクロール問題

Express と koa の使用比較 (詳細なチュートリアル)

vue のオンライン有料コース (詳細なチュートリアル)

以上がjsでオブジェクトベースのURL管理を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。