So implementieren Sie die objektbasierte Verwaltung von URLs in js

In diesem Artikel werden hauptsächlich die relevanten Kenntnisse und die Verwendung der URL-Objektverwaltung in js vorgestellt. Freunde in Not können gemeinsam lernen.

1. Problembeschreibung

URL ist ein unverzichtbarer Wert, der im Web-Schreibprozess behandelt werden muss, unabhängig davon, ob es sich um einen Sprung handelt Seite zu Seite Bei der Übertragung handelt es sich immer noch um Ajax-Anforderungsdaten oder die von anderen Framework-Plug-Ins bereitgestellte URL.
Für viele Programmierer stößt js häufig auf Situationen, in denen die URL (hauptsächlich die darin enthaltenen Parameter) geändert werden muss Die meisten Leute verwenden die beste Methode, um sie direkt zu spleißen.
Diese Methode ist besser als die Einfachheit, weist aber auch viele Mängel auf, wie zum Beispiel:

Es gibt immer potenzielle Gefahren für die Sicherheit der gebildeten URL durch Spleißen;

Es ist auch mühsam, die in einer vollständigen URL enthaltenen Parameter zu erhalten

Lösung

Basierend auf den oben genannten Problemen besteht meine Lösungsstrategie darin, die URL zu objektivieren und die reine URL-Adresse und URL-Parameter in die verschiedenen Attribute eines Objekts einzufügen
Jedes Mal, wenn die URL lautet Wenn Sie es ändern, können Sie es zuerst in das Objektformat analysieren, dann einige Parameter ändern und es dann in eine neue URL-Methode konstruieren.
Wenn Sie damit beginnen, es so zu erstellen, denken Sie möglicherweise, dass es etwas unnötig ist. aber wenn es um komplexere Situationen geht, wird es sehr praktisch sein.

3. Democode

Stellen Sie zunächst eine Methode zur Analyse bereit Erstellen Sie die URL (Sie können erwägen, sie in eine Methode zu kapseln. Der Methodenname kann komplizierter sein, um Duplikate zu vermeiden):

/**
 * 数据处理-解析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;
}

Das Folgende ist natürlich nur ein Anwendungsbeispiel und zeigt spiegelt möglicherweise nicht vollständig die Leistungsfähigkeit der URL-Objektverwaltung wider:

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

Das gedruckte Ergebnis ist:

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

In den oben genannten Fällen, insbesondere Fall 3, kann man sagen, dass die URL-Konvertierungsfunktion sehr gut ist flexibel zu verwenden.

Natürlich, wenn es tatsächlich verwendet wird, aus Sicherheitsgründen. Aus Sicherheitsgründen wird beim Generieren einer neuen URL normalerweise zuerst ein neues Objekt erstellt, anstatt das ursprüngliche Objekt zu ändern.

4. Bereiche mit Verbesserungspotenzial

Die obige Situation gilt für Nicht-Pfad-Parameter, wie zum Beispiel:

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

1 Als Parameter verwendet, ist diese Methode nicht anwendbar.

Die Methode kann auch optimiert und in eine für Pfadparameter geeignete Analyse- und Rekonstruktionsmethode umgewandelt werden, was eine andere Geschichte später ist.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Problem des Verschiebens der Off-Canvas-Seite über einen Teil im Mui-Framework hinaus

Verwendung von Better-Scroll in vue2.0 So implementieren Sie mobiles Schieben

Verwenden von cli+mui in Vue zur Lösung von Problemen im Zusammenhang mit dem Scrollen von Bereichen

Vergleich der Verwendung von Express und Koa (ausführliches Tutorial)

Bezahlte Online-Kurse in Vue (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die objektbasierte Verwaltung von URLs in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!