首页 > web前端 > js教程 > 正文

JavaScript趣题:构建URI

黄舟
发布: 2017-02-04 15:13:03
原创
1407 人浏览过

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


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!