JavaScript の楽しい質問: URI の構築

URI のパラメーターを簡単に構成および調整できるように、UriBuilder オブジェクトを作成します。

var builder = new UriBuilder('http://www.codewars.com')  
builder.params.page = 1  
builder.params.language = 'javascript'

ご覧のとおり、この UriBuilder オブジェクトは実際には URI をパラメーターとして受け取るコンストラクターです。

さらに、そのインスタンスは params オブジェクトとハッシュ テーブルにバインドされており、パラメータのキーと値を保存できます。

builder = new UriBuilder('http://www.codewars.com?page=1')

この UriBuilder オブジェクトによって受け取られる URI はパラメーターを受け取ることができ、コンストラクターが実行されると、パラメーターは自動的に解析され、params オブジェクトに保存されます。

builder.params.page = 2

このインスタンスの params オブジェクトは当然ながら変更できます。

ここで、プロトタイプにバインドされたビルド メソッドが重要なポイントになります。

// should return 'http://www.codewars.com?page=2'  
builder.build()

私たちの主なタスクは、受信した URI とインスタンスの params パラメーターに基づいて新しいオブジェクトを構築するビルド メソッドを作成する方法です。そして戻る。

paramsパラメータは通常のオブジェクトなので、その中の属性は当然削除できます。

delete builder.params.page  
  
// should return 'http://www.codewars.com'  
builder.build()

この質問は 2 つのステップに分かれています:

1 回目は、UriBuilder コンストラクターを実行します。これは、受信 URI のドメイン名とパラメーターを解析し、パラメーターを params オブジェクトに入れる必要があります。

2 回目は build メソッドを実行します。これには、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 の切り取りと結合には string メソッドが使用され、規則性は使用されません。

URI 文字列パラメータの値がエンコードされていることは注目に値します。これは元の質問でも必要です。

上記は JavaScript の興味深い質問の内容です: URI の構築 さらに関連した内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。