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

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

1. 문제 설명

URL은 페이지 점프, Ajax 요청 데이터 또는 기타 웹 작성 프로세스에서 처리해야 하는 필수 값입니다.

많은 프로그래머는 js에서 URL(주로 포함된 매개변수)을 변경해야 하는 상황에 자주 직면합니다.

이 방법은 단순함보다 낫지만 다음과 같은 많은 단점도 있습니다.

연결로 형성된 URL의 보안에는 항상 잠재적인 위험이 있습니다.

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

2. 해결 방법

위 문제를 기반으로, 솔루션 전략은 URL을 객관화하고 URL 순수 주소와 URL 매개변수를 객체의 각 속성에 넣는 것입니다.

URL을 변경할 때마다 첫 번째 분석을 객체 형식으로 사용한 다음 일부 매개변수를 변경한 다음 이를 새로운 url 메소드로 구성합니다.

이렇게 빌드를 시작하면 약간 불필요하다고 느낄 수도 있지만 좀 더 복잡한 상황을 처리할 때는 매우 편리할 것입니다.

3. 데모 코드

첫째, URL을 분석하고 구성하는 방법을 제공합니다. (이를 방법으로 캡슐화하는 것을 고려할 수 있습니다. 방법이 호출되면 반복을 피하기 위해 더 복잡할 수 있음):

/**

* 데이터 처리 - URL을 객체로 구문 분석

function parUrl(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('amp;');

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 형성/구축(문자열)

함수 concatUrl(mUrl){

var strUrl=mUrl.url;

var strParam=''

for(mUrl의 strKey){

if(strKey= =='url'||mUrl[strKey]===null)

계속;

strParam =(strKey '=' encodeURIComponent(mUrl[ strKey]) 'amp;' ); //삽입 방지<

/p>

}

if(strParam!==''){

strParam=('?' strParam.substring(0, strParam.length-1)) ;

}

return strUrl strParam;

}다음은 사용 예입니다. 물론 비교적 간단한 상황일 뿐 URL이 완전히 반영되지 않을 수도 있습니다. 객체 관리의 힘:

var strUrl1='www.example.com/admin/product/main?group_code=test_groupamp;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='User?amp;=user';

var strUrl3=concatUrl(mUrl1);

console.log(strUrl3);

var mUrl3=parseUrl(strUrl3);

콘솔. log(mUrl3.user_name); 인쇄 결과는 다음과 같습니다:

shangpin1

www.example.com/admin/product/main?group_code=test_groupamp;

www.example.com/admin/product/main?p_code=shangpin2amp;user_name=E794A83F263DE688B7

위의 상황, 특히 상황 3에서 ?amp;=를 사용하면 URL이

물론 실제 사용에서는 안전을 위해 새 URL을 생성할 때 원래 개체를 수정하는 대신 새 개체가 먼저 생성되는 경우가 많습니다.

4. 개선이 필요한 부분

위 상황은 다음과 같은 경로 매개변수를 사용할 때 비경로 매개변수에 적용됩니다.

www.example.com/admin/product/ list/1 매개변수로서 이 1은 이 메소드에는 적용되지 않습니다.

이 메소드는 경로 매개변수의 구문 분석 및 재구성에 적합한 메소드로 최적화 및 변환될 수도 있는데, 이는 나중에 또 다른 이야기입니다.

위 내용은 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다.