Chrome 49 淘汰和移除的 API

在幾乎每個 Chrome 版本中,我們都會看到產品、效能和網路平台功能有大量更新和改良。

在 Chrome 49 版 (2016 年 2 月 2 日推出 Beta 版) 中,預計於 2016 年 3 月發布穩定版),Chrome 將進行多項變更,

getComputedStyle(e).cssX 中使用「css」前置字串已淘汰

TL;DRgetComputedStyle(e) 中的「css」前置字元已遭淘汰,因為它並非正式規格的一部分。

getComputedStyle 是一個很棒的小函式。這個方法會傳回 DOM 元素樣式的全部 CSS 值,這些值是由算繪引擎計算而得。舉例來說,您可以執行 getComputedStyle(_someElement_).height,系統可能會傳回 224.1 像素,因為這是元素目前顯示的高度。

這項 API 似乎相當實用。那麼,我們將進行哪些變更?

在 Chrome 的算繪引擎改用 Blink 之前,Chrome 是由 WebKit 驅動,因此您可以在屬性開頭加上「css」前置字元。例如:顯示 getComputedStyle(e).cssHeight,而不是 getComputedStyle(e).height。 兩者都會對應至相同的基礎值,因此傳回的資料相同,但「css」前置字元的用法不符合標準,因此已遭淘汰並移除。

注意:cssFloat 是標準屬性,不受本次淘汰作業影響。

如果您在 Chrome 49 中以這種方式存取屬性,系統會傳回 undefined,您必須修正程式碼。

initTouchEvent 已淘汰

TL;DRinitTouchEvent 已淘汰,並改用 TouchEvent constructor,以提升 規格相容性,並將在 Chrome 54 中完全移除。

移除意圖 Chromestatus 追蹤工具 CRBug 問題

長期以來,您都能在 Chrome 中使用 initTouchEvent API 建立合成觸控事件,這些事件通常用於模擬觸控事件,以測試或自動化網站中的某些 UI。我們已在 Chrome 49 中淘汰這項 API,並會顯示下列警告,預計在 Chrome 53 中完全移除這項 API。

「TouchEvent.initTouchEvent」已淘汰,並將於 2016 年 9 月左右的 M53 版本中移除。請改用 TouchEvent 建構函式。
「TouchEvent.initTouchEvent」已淘汰,並將於 2016 年 9 月左右的 M53 版本中移除。請改用 TouchEvent 建構函式。詳情請參閱 https://www.chromestatus.com/features/5730982598541312

這項異動有許多優點。 此外,觸控事件規格中也沒有這項屬性。Chrome 實作的 initTouchEvent 完全不相容於 Safari 的 initTouchEvent API,且與 Android 版 Firefox 的實作方式不同。最後,TouchEvent 建構函式更容易使用。

我們決定遵循規格,而不是維護既不符合規格,也不與唯一其他實作項目相容的 API。因此,我們將先淘汰 initTouchEvent 函式,然後移除該函式,並要求開發人員使用 TouchEvent 建構函式。

網路上使用這個 API 的情況,但我們知道使用這個 API 的網站相對較少,因此不會像平常一樣快速移除。我們認為部分使用情形發生問題,是因為網站未處理 Chrome 版本的簽章。

由於 initTouchEvent API 的 iOS 和 Android/Chrome 實作方式差異極大,您通常會有一些類似的程式碼 (經常忘記 Firefox)

    var event = document.createEvent('TouchEvent');
    
    if(ua === 'Android') {
      event.initTouchEvent(touchItem, touchItem, touchItem, "touchstart", window,
        300, 300, 200, 200, false, false, false, false);
    } else {
      event.initTouchEvent("touchstart", false, false, window, 0, 300, 300, 200,
        200, false, false, false, false, touches, targetTouches, changedTouches, 0, 0);
    }
    
    document.body.dispatchEvent(touchEvent);

首先,這項做法會搜尋 User-Agent 中的「Android」,而 Android 版 Chrome 會比對並觸發這項淘汰作業,因此不建議使用。不過,由於 Android 上仍有其他 WebKit 和舊版 Blink 瀏覽器,您仍需支援舊版 API,因此目前無法移除。

如要在網路上正確處理 TouchEvents,請檢查 window 物件上是否存在 TouchEvent,並確認其「長度」是否為正數 (表示這是會採用引數的建構函式),然後使用該函式,藉此支援 Firefox、IE Edge 和 Chrome。

    if('TouchEvent' in window && TouchEvent.length > 0) {
      var touch = new Touch({
        identifier: 42,
        target: document.body,
        clientX: 200,
        clientY: 200,
        screenX: 300,
        screenY: 300,
        pageX: 200,
        pageY: 200,
        radiusX: 5,
        radiusY: 5
      });
    
      event = new TouchEvent("touchstart", {
        cancelable: true,
        bubbles: true,
        touches: [touch],
        targetTouches: [touch],
        changedTouches: [touch]
      });
    }
    else {
      event = document.createEvent('TouchEvent');
    
      if(ua === 'Android') {
        event.initTouchEvent(touchItem, touchItem, touchItem, "touchstart", window,
          300, 300, 200, 200, false, false, false, false);
      } else {
        event.initTouchEvent("touchstart", false, false, window, 0, 300, 300, 200,
          200, false, false, false, false, touches, targetTouches, 
          changedTouches, 0, 0);
      }
    }
    
    document.body.dispatchEvent(touchEvent);

RTCPeerConnection 方法中必須有錯誤和成功處理常式

簡而言之:WebRTC 的 RTCPeerConnection 方法 createOffer()createAnswer() 現在需要錯誤處理常式和成功處理常式。先前,您只能使用成功處理常式呼叫這些方法。該用法已遭淘汰。

在 Chrome 49 中,如果您呼叫 setLocalDescription()setRemoteDescription() ,但未提供錯誤處理常式,系統也會顯示警告。我們預計在 Chrome 50 中,將這些方法設為必須提供錯誤處理常式引數。

這是為在這些方法中導入 Promise 鋪路,因為 WebRTC 規格要求這麼做。

以下是 WebRTC RTCPeerConnection 示範 (main.js,第 126 行) 的範例:

    function onCreateOfferSuccess(desc) {
      pc1.setLocalDescription(desc, function() {
         onSetLocalSuccess(pc1);
      }, onSetSessionDescriptionError);
      pc2.setRemoteDescription(desc, function() {
        onSetRemoteSuccess(pc2);
      }, onSetSessionDescriptionError);
      pc2.createAnswer(onCreateAnswerSuccess, onCreateSessionDescriptionError);
    }

請注意,setLocalDescription()setRemoteDescription() 一律都有錯誤處理常式參數,因此只要指定該參數,就是安全的變更。

一般來說,對於實際工作 WebRTC 應用程式,我們建議使用 adapter.js (由 WebRTC 專案維護的墊片),避免應用程式受到規格變更和前置字元差異的影響。

Document.defaultCharset 已淘汰

重點摘要:為提升規格相容性,Document.defaultCharset 已遭淘汰。

移除意圖 Chromestatus 追蹤工具 CRBug 問題

Document.defaultCharset 是唯讀屬性,會根據使用者的區域設定,傳回系統的預設字元編碼。由於瀏覽器會使用 HTTP 回應或網頁內嵌中繼標記中的字元編碼資訊,因此維護這個值並無實質用途。

使用 document.characterSet 時,您會取得 HTTP 標頭中指定的第一個值。如果沒有,系統會取得 <meta> 元素的 charset 屬性中指定的值 (例如 <meta charset="utf-8">)。最後,如果上述值皆無法取得,document.characterSet 會是使用者的系統設定。

Gecko 不支援這項屬性,且這項屬性並未明確指定,因此 Chrome 49 (2016 年 1 月的 Beta 版) 將淘汰 Blink 中的這項屬性。在 Chrome 50 中移除該屬性之前,主控台會顯示下列警告:

「Document.defaultCharset」已淘汰,並將於 M50 (2016 年 4 月左右) 移除。
「Document.defaultCharset」已淘汰,並將於 2016 年 4 月左右在 M50 中移除。詳情請參閱 https://www.chromestatus.com/features/6217124578066432

如要進一步瞭解不指定此項目的原因,請參閱 GitHub 上的討論: https://github.com/whatwg/dom/issues/58

已移除 getStorageUpdates()

TL;DRNavigator.getStorageUpdates() 已移除,因為它不再屬於 Navigator 規格

移除意圖 Chromestatus 追蹤工具 CRBug 問題

如果這項異動會影響任何人,我會吃掉自己的帽子。getStorageUpdates() 幾乎從未在網路上使用過。

引用 (非常舊版本) 的 HTML5 規格:

聽起來很酷吧?規格甚至使用「whence」一詞 (巧合的是,這是規格中唯一出現的 whence 執行個體)。在規格層級,有一個 StorageMutex 可控管對封鎖儲存空間 (例如 localStorage 和 Cookie) 的存取權,這個 API 可協助釋放該互斥鎖,讓其他指令碼不會遭到這個 StorageMutex 封鎖。但這項功能從未實作,IE 或 Gecko 也不支援,而且 WebKit (因此 Blink) 的實作方式是無作業。

這項功能已從規格中移除一段時間,且已從 Blink 完全移除 (即使呼叫,這項功能也已長時間處於無運算狀態,不會執行任何動作)。

萬一您有呼叫 navigator.getStorageUpdates() 的程式碼,則必須先檢查函式是否存在,再呼叫函式。

Object.observe() 已淘汰

摘要Object.observe() 已淘汰,因為不再屬於標準化軌跡,且將在日後推出的版本中移除。

移除意圖 Chromestatus 追蹤工具 CRBug 問題

2015 年 11 月,我們宣布要從 TC39 撤回 Object.Observe。這項功能已在 Chrome 49 中淘汰,如果您嘗試使用,控制台會顯示下列警告:

「Object.observe」已淘汰,並將於 2016 年 4 月左右的 M50 版本中移除。
'Object.observe' 已淘汰,並將於 2016 年 4 月左右的 M50 版本中移除。詳情請參閱 https://www.chromestatus.com/features/6147094632988672

許多開發人員都很喜歡這個 API,如果您曾試用過這個 API,現在想尋找轉移路徑,建議使用 MaxArt2501/object-observe 等 Polyfill,或是 polymer/observe-js 等封裝函式庫。