Comment implémenter la gestion basée sur les objets des URL en 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 apprendre ensemble.

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 d'un saut de page à page Lors du transfert, il s'agit toujours des données de requête ajax ou de l'url fournie par d'autres plug-ins du framework.
Pour de nombreux programmeurs, js rencontre souvent des situations où l'url (principalement les paramètres qu'elle contient) doit être modifiée . La plupart des gens utilisent La meilleure méthode est de raccorder directement
Cette méthode est meilleure que la simplicité, mais elle 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 ;

Il est également difficile d'obtenir les paramètres et l'adresse pure contenus dans une URL complète pour la prochaine étape de comparaison

Solution

Sur la base des problèmes ci-dessus, ma stratégie de solution consiste à objectiver l'URL et à placer l'adresse URL pure et les paramètres d'URL dans les différents attributs d'un objet
Chaque fois que l'URL est To. changement, vous pouvez d'abord l'analyser dans le format objet, puis modifier certains paramètres, puis le construire dans une nouvelle méthode d'URL
Lorsque vous commencez à le construire comme ça, vous pouvez penser que c'est un peu inutile, mais lorsqu'il s'agit de situations plus complexes, ce sera très pratique.

3 Code de démonstration

Tout d'abord, fournissez une méthode pour analyser et construisez l'url (vous pouvez envisager de l'encapsuler dans une méthode, 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;
}

Ce qui suit sont des exemples d'utilisation. Bien sûr, ils ne montrent que des situations relativement simples et. 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, en particulier le cas 3, on peut dire que l'URL La fonction de conversion est très flexible.

Bien sûr, en réalité, lorsque vous l'utilisez, par souci de sécurité, lors de la génération d'une nouvelle URL, vous créez généralement d'abord un nouvel objet au lieu de modifier l'objet d'origine

.

4. Domaines à améliorer

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

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

Ce 1 est utilisé comme paramètre, et cette méthode ne s'applique pas.

Vous pouvez également optimiser la méthode et convertir la méthode en une méthode adaptée à l'analyse et à la reconstruction des paramètres de chemin, ce qui en est une autre. histoire plus tard.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Problème de glissement du côté hors toile au-delà de la partie dans le framework mui

Utilisation de better-scroll dans vue2.0 Comment réaliser un glissement mobile

Utilisation de cli+mui dans Vue pour résoudre les problèmes de défilement de zone

Comparaison de l'utilisation d'express et koa (détail tutoriel)

Cours payants en ligne en vue (tutoriel détaillé)

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!