js에서 객체 기반 URL 관리를 구현하는 방법

이 글에서는 주로 js의 URL 객체 관리 관련 지식과 사용법을 소개합니다. 필요한 친구들이 함께 배울 수 있습니다.

1. 문제 설명

url은 페이지 점프, Ajax 요청 데이터 또는 기타 프레임워크 플러그인 URL 등 웹 작성 프로세스에서 처리해야 하는 필수 값입니다. 프로그래머들은 js에서 URL(주로 여기에 포함된 매개변수)을 변경해야 하는 상황에 자주 직면합니다. 대부분의 사람들이 사용하는 방법은 직접 접합입니다.
이 방법은 단순성보다 낫고 다음과 같은 단점도 많습니다. :

스플라이싱으로 형성된 URL에는 항상 잠재적인 위험이 있습니다.

다음 비교 단계를 위해 전체 URL에 포함된 매개변수와 순수 주소를 얻는 것도 번거롭습니다. . 솔루션 아이디어

위 문제를 바탕으로 내 솔루션 전략은 URL을 객관화하고 URL 순수 주소와 URL 매개변수를 개체의 각 속성에 넣는 것입니다.Every URL을 변경하려면 먼저 분석하면 됩니다. 이렇게 빌드를 시작하면 약간 불필요하다고 느낄 수도 있지만 좀 더 복잡한 문제를 처리하면

3. 데모 코드

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

위의 경우, 특히 3번의 경우 URL 변환 기능은 사용하기에 매우 유연하다고 할 수 있습니다.

물론 실제로 사용할 때는 안전을 위해 새 URL을 생성할 때 일반적으로 새 개체가 사용됩니다.

4.개선할 부분

위 상황은 경로 매개변수가 아닌 경우에 적용됩니다.

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

이 1은

방법을 최적화할 수도 있으며, 경로 매개변수에 적합한 구문 분석 및 재구성으로 변환하는 것은 나중에 이야기합니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

mui 프레임워크의 부분을 넘어 캔버스 외부 측면 슬라이딩 문제

vue2.0에서 better-scroll을 사용하여 모바일 슬라이딩을 구현하는 방법

cli+를 사용하는 관련 영역 mui in Vue 스크롤링 문제

express와 Koa의 사용 비교(자세한 튜토리얼)

vue의 온라인 유료 강좌(자세한 튜토리얼)

위 내용은 js에서 객체 기반 URL 관리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!