iOS 設(shè)備上 HTML5 的一些 feature

iOS 設(shè)備上音頻無(wú)法自動(dòng)播放：Safari developer

Vue.Js 的 click 也無(wú)法讓音頻播放：Vue.js nextTick issues

主要原因是：

iOS requires user input for showing keyboard. Before Vue uses micro task so user click counts as a valid trigger for keyboard. However, in 2.5 we uses macro task so iOS no longer treats it as trigger.

這個(gè) feature 目前導(dǎo)致的問(wèn)題：

1. 使用 Vue.js 的 click 事件無(wú)法讓一個(gè) input / textarea 的狀態(tài)變成 focus
2. 使用 Vue.js 的 click 事件無(wú)法讓一個(gè)媒體資源開始播放

focus 解決方法：

// 使用原生 Js 來(lái)監(jiān)聽 button 的 click 事件，讓可輸入?yún)^(qū)域 focus
hackFocus ({ source, target, event, statement }) {
  if (!(source instanceof Element) || !(target instanceof Element) || !statement) {
    return
  }   
  source.addEventListener(event, function () {
    target.style.display = 'block'
    target.focus()
  })
}

遺漏問(wèn)題：

1. 如果觸發(fā)可輸入?yún)^(qū)域 focus 的 button 只有一個(gè)，那么這種實(shí)現(xiàn)方案還是可以接受的
2. 如果有多個(gè) button，并且這些 button 是動(dòng)態(tài)追加到 DOM 中的（翻頁(yè)），那就很復(fù)雜了
   1. 首先它會(huì)導(dǎo)致代碼難以維護(hù)，點(diǎn)擊不同 button 它觸發(fā)的事件參數(shù)都是不同的，statement 也是不同的
   2. 所以目前想到的方法是使用事件委托，并且使用HTML原生的 data-xxx 屬性來(lái)做 statement

// 這里簡(jiǎn)單的用 commentAble 代替 statement
if (commentAble) {
  const input = document.getElementById('comment');
  [].forEach.call(document.querySelectorAll('.comments-wrap'), (wrap) => {
    wrap.addEventListener('click', (e) => {
      if (/(reply-btn|ic-comment)/.test(e.target.className)) {
        window.__drawer_pos = window.scrollY // 記錄focus前窗口的距離頂部的高度
        input.style.display = 'block'
        input.focus()
      }
    })
  })
}

media 解決方案：

1. 不要使用 Vue.js，使用原生的方案

// 綁定原生事件
[].forEach.call(document.querySelectorAll('.audio-item'), item => {
  item.addEventListener('click', () => {
    // 調(diào)用 vue 的 method 處理 state 并播放
    this.playing()
  })
});

遺留問(wèn)題：

1. 頁(yè)面復(fù)雜后代碼很難維護(hù)，特別是要支持 SSR 并且要支持 App 內(nèi)調(diào)用另一種播放策略時(shí)
2. [TODO]如何自動(dòng)播放下一首？