DAY 13. JavaScript URL API

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:"

範例二(searchParams)

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時自動釋放它們; 然而, 為了最佳化效能與記憶體用量, 當有安全的時機請務必手動釋放它們.