国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > php开源 > php教程 > JavaScript趣题:构建URI

JavaScript趣题:构建URI

来源:程序员人生   发布时间:2016-12-02 09:08:34 阅读次数:3221次

创建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进行了编码,这也是原题所要求的。


生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生