집 > 기사 > 웹 프론트엔드 > js의 URL 객체 관리에 대한 자세한 예제 분석

js의 URL 객체 관리에 대한 자세한 예제 분석

小云云원래의: 2017-12-29 14:09:401144검색

이 글에서는 주로 js의 URL 객체 관리에 대한 관련 지식과 사용법을 소개합니다. 필요한 친구들은 편집자를 따라가면서 함께 배울 수 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

1. 문제 설명

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

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

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

위 문제를 바탕으로 저의 해결 전략은 URL을 객체화하고, URL 순수 주소와 URL 매개변수를 객체의 다양한 속성에 넣는 것입니다.

URL이 변경될 때마다 먼저 객체 형식을 사용하면 되고, 그런 다음 일부 매개변수를 변경한 다음 새 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을 매개변수로 사용하므로 이 방법은 적용되지 않습니다.

당신 또한 방법을 최적화하고 경로 매개변수에 적합한 구문 분석 및 구문 분석 방법으로 변환할 수 있습니다. 이는 또 다른 이야기입니다.

js의 URL 객체 관리에 대한 자세한 예제 분석

관련 기사