JavaScript趣題：構(gòu)建URI
來源：程序員人生 發(fā)布時間：2016-12-02 09:08:34 閱讀次數(shù)：3839次
創(chuàng)建1個UriBuilder對象，使得你可以輕松地對1個URI進(jìn)行配置，參數(shù)調(diào)劑。
var builder = new UriBuilder('http://www.codewars.com')
builder.params.page = 1
builder.params.language = 'javascript'
大家可以看到，這個UriBuilder對象實(shí)際上是1個構(gòu)造函數(shù)，它接收1個URI作為參數(shù)。
而且，它的實(shí)例上綁定了1個params對象，1個hash表，可以寄存參數(shù)的key和value。
builder = new UriBuilder('http://www.codewars.com?page=1')
這個UriBuilder對象接收的URI是可以帶參數(shù)的，在構(gòu)造函數(shù)被履行的時候，參數(shù)將被自動解析，并被存到params對象中。
builder.params.page = 2
這個實(shí)例上的params對象自然是可以被修改的。
關(guān)鍵的地方來了，這個綁定在原型上的build方法：
// should return 'http://www.codewars.com?page=2'
builder.build()
咋們的主要任務(wù)就是如何編寫1個這樣的build方法，它根據(jù)傳入的URI和實(shí)例上的params參數(shù)，構(gòu)建新的URI并返回。
由于params參數(shù)是普通對象，因此自然可以刪除其中的屬性。
delete builder.params.page
// should return 'http://www.codewars.com'
builder.build()
這個題目分為兩步：
第1次是履行UriBuilder構(gòu)造函數(shù)，需要解析傳入URI的域名及參數(shù)，將參數(shù)放到params對象中。
第2次是履行build方法，需要根據(jù)params對象和域名構(gòu)建新的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;
};
}
}
在這里，情勢上采取動態(tài)原型模式，由于它比構(gòu)造函數(shù)-原型式封裝得更好。
具體上，采取字符串方法切割，拼接URI，沒有采取正則。
值得注意的1點(diǎn)，對URI字符串參數(shù)的value進(jìn)行了編碼，這也是原題所要求的。
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
