JavaScript趣題：建構URI

建立一個UriBuilder對象，使得你可以輕鬆地對一個URI進行配置，參數調整。

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

大家可以看到，這個UriBuilder物件其實是一個建構函數，它接收一個URI作為參數。

而且，它的實例上綁定了一個params對象，一個hash表，可以存放參數的key和value。

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

這個UriBuilder物件接收的URI是可以帶參數的，在建構子被執行的時候，參數會被自動解析，並存到params物件中。

builder.params.page = 2

這個實例上的params物件自然是可以被修改的。

關鍵的地方來了，這個綁定在原型上的build方法：

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

咋們的主要任務就是如何編寫一個這樣的build方法，它根據傳入的URI和實例上的params參數，構建新的URI並返回。

因為params參數是普通對象，因此自然可以刪除其中的屬性。

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

這個題目分為兩步驟：

第一次是執行UriBuilder建構函數，需要解析傳入URI的網域名稱及參數，將參數放到params物件中。

第二次是執行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，沒有採用正規。

值得注意的一點，對URI字串參數的value進行了編碼，這也是原題所要求的。

以上就是 JavaScript趣題：建構URI的內容，更多相關內容請關注PHP中文網（www.php.cn）！