JavaScript趣題:建構URI
建立一個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)!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務
