Detaillierte Beispielanalyse der URL-Objektverwaltung 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 dem Editor folgen, um gemeinsam zu lernen. Ich hoffe, es hilft allen.

1. Problembeschreibung

URL ist ein unverzichtbarer Wert, der im Web-Schreibprozess behandelt werden muss, sei es bei Seitensprüngen, Ajax-Anforderungsdaten oder anderen Framework-Plug-Ins URL wird bereitgestellt.
Für viele Programmierer gibt es häufig Situationen, in denen die URL (hauptsächlich die darin enthaltenen Parameter) in js geändert werden muss.
Diese Methode ist besser Es hat nicht nur Einfachheit, sondern weist auch viele Mängel auf, wie zum Beispiel:

Es gibt immer potenzielle Gefahren in der Sicherheit der durch Spleißen gebildeten URL.

Das Erhalten aller Informationen aus einem vollständigen URL Es ist auch eine mühsame Sache, Parameter und reine Adressen für den nächsten Vergleichsschritt einzubeziehen;

2. Lösungsideen

Basierend auf den oben genannten Problemen lautet meine Lösungsstrategie Die URL wird objektweise verwaltet und die reine URL-Adresse und die URL-Parameter werden in jedes Attribut eines Objekts eingefügt.
Jedes Mal, wenn die URL geändert wird, können Sie sie zunächst in das Objektformat analysieren und dann einige davon ändern Parameter und dann als neue URL-Methode etabliert
Es mag etwas unnötig erscheinen, wenn Sie mit der Erstellung beginnen, aber es wird sehr praktisch sein, wenn Sie mit einigen komplexeren Situationen umgehen. Demonstrationscode

Stellen Sie zunächst eine Methode zum Analysieren und Erstellen von URLs bereit (Sie können erwägen, sie in eine Methode zu kapseln, und der Methodenname kann komplizierter sein, um Duplikate zu vermeiden):

Die Im Folgenden finden Sie natürlich Anwendungsbeispiele. Es wird nur eine relativ einfache Situation gezeigt, die die Leistungsfähigkeit der URL-Objektverwaltung möglicherweise nicht vollständig widerspiegelt:

/**
 * 数据处理-解析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 gedruckte Ergebnis lautet:

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

In den oben genannten Fällen, insbesondere in Fall 3, können Sie die URL-Konvertierungsfunktion aus Sicherheitsgründen bei der Generierung sehr flexibel verwenden Bei einer neuen URL wird normalerweise zuerst ein neues Objekt erstellt und nicht das ursprüngliche Objekt, das auf der Basis geändert wird.

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

Bereiche mit Verbesserungspotenzial

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

Als Parameter gilt dieser 1 nicht für diese Methode

Die Methode kann auch optimiert und in a umgewandelt werden Methode, die zum Parsen und Rekonstruieren von Pfadparametern geeignet ist, was eine andere Geschichte später ist.

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

Verwandte Empfehlungen:

Objektbasierte Programmierung in JavaScript

h5 PHP5 neue Funktionen: objektorientierteres PHP

JavaScript-Einführungs-Tutorial (12) js-Objektprogrammierung_Grundkenntnisse

Das obige ist der detaillierte Inhalt vonDetaillierte Beispielanalyse der URL-Objektverwaltung in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!