JavaScript 재미있는 질문: URI 구성-JS 튜토리얼-php.cn

JavaScript 재미있는 질문: URI 구성

黄舟

풀어 주다： 2017-02-04 15:13:03

원래의

1430명이 탐색했습니다.

URI 매개변수를 쉽게 구성하고 조정할 수 있도록 UriBuilder 개체를 만듭니다.

var builder = new UriBuilder(&#39;http://www.codewars.com&#39;)  
builder.params.page = 1  
builder.params.language = &#39;javascript&#39;

로그인 후 복사

보시다시피 이 UriBuilder 객체는 실제로 URI를 매개변수로 받는 생성자입니다.

게다가 해당 인스턴스는 매개변수의 키와 값을 저장할 수 있는 params 객체와 해시 테이블에 바인딩됩니다.

builder = new UriBuilder(&#39;http://www.codewars.com?page=1&#39;)

로그인 후 복사

이 UriBuilder 객체가 수신한 URI는 매개변수를 사용할 수 있습니다. 생성자가 실행되면 매개변수가 자동으로 구문 분석되어 params 객체에 저장됩니다.

builder.params.page = 2

로그인 후 복사

이 인스턴스의 params 객체는 자연스럽게 수정될 수 있습니다.

핵심 사항은 프로토타입에 바인딩된 빌드 메소드입니다.

// should return &#39;http://www.codewars.com?page=2&#39;  
builder.build()

로그인 후 복사

우리의 주요 작업은 수신 URI 및 params 매개변수를 기반으로 하는 빌드 메소드를 작성하는 방법입니다. 인스턴스는 새 URI를 구축하고 이를 반환합니다.

params 매개변수는 일반 객체이므로 당연히 해당 속성이 삭제될 수 있습니다.

delete builder.params.page  
  
// should return &#39;http://www.codewars.com&#39;  
builder.build()

로그인 후 복사

이 질문은 두 단계로 나뉩니다.

첫 번째는 UriBuilder 생성자를 실행하는 것입니다. 이 생성자는 수신 URI의 도메인 이름과 매개 변수를 구문 분석하고 해당 매개 변수를 매개변수 개체.

두 번째는 params 객체와 도메인 이름을 기반으로 새 URI를 구축해야 하는 빌드 메서드를 실행하는 것입니다.

function UriBuilder(url){  
    this.url = url;  
    this.params = {};  
    this.domain = "";  
      
    var parseURL = function(url){  
        var questionMarkPos = url.indexOf("?");  
        if(questionMarkPos >= 0){  
            this.domain = url.slice(0 ,questionMarkPos);  
            var paramStr = url.slice(questionMarkPos + 1);  
            var andMarkPos = paramStr.indexOf("&");  
            if(andMarkPos >= 0){  
                var pairs = paramStr.split("&");  
                for(var i=0;i<pairs.length;i++){  
                    var pair = pairs[i];  
                    var key$Value = pair.split("=");  
                    this.params[key$Value[0]] = key$Value[1];  
                }  
            }  
            else{  
                var pair = paramStr.split("=");  
                this.params[pair[0]] = pair[1];  
            }  
        }  
        else{  
            this.domain = url;  
        }  
    };  
      
    parseURL.call(this,this.url);  
      
    if(typeof UriBuilder.prototype.build === "undefined"){  
        UriBuilder.prototype.build = function(){  
            var result = this.domain;  
            var keys = Object.keys(this.params);  
            if(keys.length > 0){  
                result += "?";  
                for(var i=0;i<keys.length;i++){  
                    result += keys[i] + "=" + encodeURIComponent(this.params[keys[i]]);  
                    if(i < keys.length - 1){  
                        result += "&";  
                    }  
                }  
            }  
            return result;  
        };  
    }  
}

로그인 후 복사

여기서 동적 프로토타입 패턴은 생성자 프로토타입 패턴보다 더 잘 캡슐화되므로 공식적으로 채택되었습니다.

구체적으로 문자열 메서드는 정규식을 사용하지 않고 URI를 자르고 연결하는 데 사용됩니다.

원래 질문에서도 요구되는 URI 문자열 매개변수의 값이 인코딩된다는 점은 주목할 가치가 있습니다.

위 내용은 JavaScript 흥미로운 질문: URI 구성에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 웹사이트(m.sbmmt.com)를 참고하세요!