JavaScript趣题：构建URI
来源：程序员人生 发布时间：2016-12-02 09:08:34 阅读次数：3530次
创建1个UriBuilder对象，使得你可以轻松地对1个URI进行配置，参数调剂。
var builder = new UriBuilder('http://www.codewars.com')
builder.params.page = 1
builder.params.language = 'javascript'
大家可以看到，这个UriBuilder对象实际上是1个构造函数，它接收1个URI作为参数。
而且，它的实例上绑定了1个params对象，1个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()
咋们的主要任务就是如何编写1个这样的build方法，它根据传入的URI和实例上的params参数，构建新的URI并返回。
由于params参数是普通对象，因此自然可以删除其中的属性。
delete builder.params.page
// should return 'http://www.codewars.com'
builder.build()
这个题目分为两步：
第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，没有采取正则。
值得注意的1点，对URI字符串参数的value进行了编码，这也是原题所要求的。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
