Exemple détaillé d'analyse de la gestion des objets URL dans js

Cet article présente principalement les connaissances et l'utilisation pertinentes de la gestion des objets URL dans js. Les amis dans le besoin peuvent suivre l'éditeur pour apprendre ensemble. J'espère que cela aide tout le monde.

1. Description du problème

L'URL est une valeur indispensable qui doit être prise en compte dans le processus de rédaction Web, qu'il s'agisse de sauts de page, de données de requête ajax ou d'autres plug-ins de framework. L'URL est fournie.
Pour de nombreux programmeurs, ils rencontrent souvent des situations où l'URL (principalement les paramètres qu'elle contient) doit être modifiée dans js. La méthode que la plupart des gens utilisent est l'épissage direct
Cette méthode est meilleure. que la simplicité, mais il présente également de nombreux inconvénients, tels que :

Il existe toujours des dangers potentiels dans la sécurité de l'URL formée par épissage

Obtenir toutes les informations à partir d'un ensemble complet ; URL Il est également difficile d'inclure des paramètres et des adresses pures pour la prochaine étape de comparaison ;

2. Idées de solutions

Sur la base des problèmes ci-dessus, ma stratégie de solution consiste à L'URL est gérée par objet, et l'adresse pure de l'URL et les paramètres d'URL sont placés dans chaque attribut d'un objet
Chaque fois que l'URL est modifiée, vous pouvez d'abord l'analyser au format objet, puis modifier certains éléments. paramètres, puis Établi comme une nouvelle méthode d'URL
Cela peut sembler un peu inutile lorsque vous commencez à le construire comme ceci, mais ce sera très pratique lorsque vous faites face à des situations plus complexes

3. Code de démonstration

Fournissez d'abord une méthode d'analyse et de construction d'URL (vous pouvez envisager de l'encapsuler dans une méthode, et le nom de la méthode peut être plus compliqué pour éviter la duplication) :

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

Le Voici bien sûr des exemples d'utilisation. Seule une situation relativement simple est présentée, qui peut ne pas refléter pleinement la puissance de la gestion des objets 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);

Le résultat imprimé est :

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

Dans les cas ci-dessus, notamment le cas 3, vous pouvez On dit que la fonction de conversion d'URL est très flexible à utiliser

Bien sûr, lors de son utilisation réelle, par souci de sécurité, lors de la génération. une nouvelle URL, un nouvel objet est généralement créé en premier, plutôt que dans l'objet d'origine modifié sur la base.

4. Domaines d'amélioration

La situation ci-dessus s'applique aux paramètres non-path. , lors de l'utilisation de paramètres de chemin, tels que :

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

En tant que paramètre, ce 1 n'est pas applicable à cette méthode

La méthode peut également être optimisée et convertie en un. méthode adaptée à l’analyse et à la reconstruction des paramètres de chemin, ce qui sera une autre histoire plus tard.

Recommandations associées :

Programmation basée objet en JavaScript

h5 Nouvelles fonctionnalités PHP5 : PHP plus orienté objet

Tutoriel d'introduction à JavaScript (12) programmation d'objets js_connaissances de base

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!