JavaScript Fun Question: Constructing URIs

Create a UriBuilder object so that you can easily configure and adjust parameters of a URI.

var builder = new UriBuilder('http://www.codewars.com')  
builder.params.page = 1  
builder.params.language = 'javascript'

As you can see, this UriBuilder object is actually a constructor that receives a URI as a parameter.

Moreover, its instance is bound to a params object and a hash table, which can store the key and value of the parameters.

builder = new UriBuilder('http://www.codewars.com?page=1')

The URI received by this UriBuilder object can take parameters. When the constructor is executed, the parameters will be automatically parsed and stored in the params object.

builder.params.page = 2

The params object on this instance can naturally be modified.

Here comes the key point, the build method bound to the prototype:

// should return 'http://www.codewars.com?page=2'  
builder.build()

Our main task is how to write such a build method, which based on the incoming URI and params parameter on the instance, builds a new URI and returns it.

Because the params parameter is a normal object, the attributes in it can naturally be deleted.

delete builder.params.page  
  
// should return 'http://www.codewars.com'  
builder.build()

This question is divided into two steps:

The first time is to execute the UriBuilder constructor, which needs to parse the domain name and parameters of the incoming URI and put the parameters into the params object.

The second time is to execute the build method, which requires building a new URI based on the params object and domain name.

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;  
        };  
    }  
}

Here, the dynamic prototype pattern is formally adopted because it encapsulates it better than the constructor-prototype pattern.

Specifically, the string method is used to cut and splice URIs, without using regular expressions.

It is worth noting that the value of the URI string parameter is encoded, which is also required by the original question.

The above is the content of JavaScript interesting questions: constructing URI. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!