URL物件是個看起來很簡單、冷門的物件
但事實上它的用途很廣,例如解析、建構、編碼URL等工作都由它一手包辦
首先我們先來看看幾個基本用途
/*
| 簡單的傳入一個網址給URL物件
| 接著我們就可以使用這個物件來快速地獲取相關資訊
*/
const url = new URL('https://example.com/javascript/2#tag=es6')
const urlHash = url.hash // "#tag=es6"
const urlHost = url.host // "example.com"
const urlHref = url.href // "https://example.com/javascript/2#tag=es6"
const urlPathname = url.pathname // "/javascript/2"
const urlProtocol = url.protocol // "https:"
const url = new URL('https://example.com?tag=es6&page=2&tag=url')
const params = url.searchParams
console.log(params.get('page')) // 2
console.log(params.get('tag')) // es6
/*
| append方法可以為querstring添加一個param
*/
params.append('queen-of-sneakers', 'Ellen')
console.log(params.get('queen-of-sneakers')) // Ellen
/*
| entries方法回傳iterator
*/
for(var pair of params.entries()) {
const [param, value] = pair
console.log(pair)
console.log(`${param}: ${value}`)
console.log('=======================')
}
// ["tag", "es6"]
// "tag: es6"
// "======================="
// ["page", "2"]
// "page: 2"
// "======================="
// ["tag", "url"]
// "tag: url"
// "======================="
/*
| 使用getAll方法取得網址中所有param為tag的值
*/
console.log(params.getAll('tag')) // ["es6", "url"]
/*
| 使用has方法確認網址中帶有其參數
*/
console.log(params.has('fruit')) // false
console.log(params.has('tag')) // true
/*
| 使用keys方法取的網址中所有param key 的 iterator
*/
for(let pair of params.keys()) {
console.log(pair)
}
// "tag"
// "page"
// "tag"
/*
| 使用keys方法取的網址中所有param value 的 iterator
*/
for(let pair of params.values()) {
console.log(pair)
}
// "es6"
// "2"
// "url"
/*
| set方法是定param的value, 如果該param存在多個則刪除其他的
| 原本範例中的url帶有兩個名為tag的param
*/
params.set('tag', 'mod')
console.log(params.getAll('tag')) // ["mod"]
/*
| toString方法回傳url的qustryString
| sort方法排序所有的param, 依據它們的key值
*/
console.log(params.toString()) // "tag=es6&page=2&tag=url"
params.sort()
console.log(params.toString()) // "page=2&tag=es6&tag=url"
靜態方法createObjectURL
本範例資料引用至MDN
用於建立一個帶有URL的DOMString
以代表參數中所傳入的物件. 該URL的生命週期與創造它的window中的 document一致. 這個新的物件URL 代表了所指定的File
物件或是Blob
物件
建構式
objectURL = URL.createObjectURL(blob)
/*
| 這個範例表達如何搭配input[type="file"]
| 來實現preview圖片效果
*/
const inputElem = document.querySelector('input[type="file"]')
inputElem.addEventListener('change', function(event) {
const inputFile = this.files[0]
const objURL = URL.createObjectURL(inputFile)
const img = document.createElement('img')
/*
| 試著嘗試註解與反註解此事件
| 當我們沒有註解此處理器時,在圖片display出來後
| 點右鍵在新tab開啟圖片時可以正常開啟,因為記憶體尚未被釋放
| 反之若我們沒註解此事件監聽
| 在圖片被load之後將會把objURL從記憶體當中釋放
| 因此在這之後對圖片點右鍵,在tab開啟時,無法正常顯示圖片
*/
img.addEventListener('load', e => {
URL.revokeObjectURL(objURL)
})
img.src = objURL
document.body.appendChild(img)
})
注意事項
每次呼叫 createObjectURL() 都會產生一個新的URL, 不論是否曾以同一物件產生過. 當你不再需要它們的時候必須對每一個都呼叫 URL.revokeObjectURL() 來釋放它們. 瀏覽器會在document被unload時自動釋放它們; 然而, 為了最佳化效能與記憶體用量, 當有安全的時機請務必手動釋放它們.