JavaScript趣题：构建URI

来源：动视网责编：小采时间：2020-11-27 20:25:44

JavaScript趣题：构建URI

JavaScript趣题：构建URI:创建一个UriBuilder对象，使得你可以轻松地对一个URI进行配置，参数调整。var builder = new UriBuilder('http://www.codewars.com') builder.params.page = 1 builder.params.language = 'javasc

推荐度：

点击下载本文 文档为doc格式

导读JavaScript趣题：构建URI:创建一个UriBuilder对象，使得你可以轻松地对一个URI进行配置，参数调整。var builder = new UriBuilder('http://www.codewars.com') builder.params.page = 1 builder.params.language = 'javasc

创建一个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

推荐度：

点击下载本文 文档为doc格式

标签： js javascript uri

热门焦点

JavaScript趣题：构建URI

JavaScript趣题：构建URI

JavaScript趣题：构建URI

最新推荐

猜你喜欢

热门推荐