Chrome 49 淘汰和移除的 API

在絕大多數的 Chrome 版本中,我們都發現大量的更新和改善項目,包含產品、效能和網路平台的功能。

Chrome 49 (Beta 版:2016 年 2 月 2 日;預估穩定日期:2016 年 3 月) Chrome 有一些異動

在 getComputedStyle(e).cssX 中已不適用「css」前置字串

重點摘要getComputedStyle(e) 中的「css」前置字串已淘汰,因為該前置字串不是正式spec的一部分。

getComputedStyle 是很好的功能,這個方法會傳回 DOM 元素樣式的所有 CSS 值,因為轉譯引擎會計算這些值。例如,您可以執行 getComputedStyle(_someElement_).height,且可能會傳回 224.1px,因為這是目前顯示的元素高度。

這個 API 似乎很方便異動內容

將 Chrome 的轉譯引擎變更為 Blink 之前,該引擎採用 WebKit 技術,讓您能夠在屬性開頭加上「css」前置字串。例如 getComputedStyle(e).cssHeight,而非 getComputedStyle(e).height。兩者傳回的資料會與對應至相同基礎值的資料相同,但這是使用了非標準且已淘汰和移除的「css」前置字串。

注意 - cssFloat 是標準屬性,不受此淘汰影響。

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

initTouchEvent 已淘汰

TL;DRinitTouchEvent 已淘汰,並改用 TouchEvent constructor 以改善規格法規遵循,並將在 Chrome 54 版中完全移除。

意圖移除 Chrome 狀態追蹤工具 CRBug 問題

如果您已使用 initTouchEvent API 在 Chrome 中建立合成觸控事件,經常用於模擬觸控事件,無論是用於測試或自動執行網站中的部分使用者介面。在 Chrome 49 版中,我們已淘汰這個 API,並且會顯示以下警告,準備在 Chrome 53 版中完全移除此 API。

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

有許多原因會造成這項變動。 這也不適用於觸控事件規格。initTouchEvent Chrome 的實作與 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);

首先,由於系統在使用者代理程式和 Android 版 Chrome 中尋找「Android」,就會發生這項錯誤,因此造成這項錯誤。目前無法移除這個 API,因為 Android 上還會有其他採用 WebKit 及舊版 Blink 的瀏覽器,一段時間內仍需支援舊版 API。

如要正確處理網路上的 TouchEvents,您應變更程式碼來支援 Firefox、IE Edge 和 Chrome,方法是檢查 window 物件中是否存在 TouchEvent,以及其長度是否為正「長度」(表示它是接受引數的建構函式)。

    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 方法需要的錯誤和成功處理常式

TL;DR:WebRTC RTCPeerConnection 方法 createOffer()createAnswer(),現在需要錯誤處理常式和成功處理常式。以前,可以只使用成功處理常式呼叫這些方法。這種使用率已淘汰。

在 Chrome 49 版中,如果您在沒有提供錯誤處理常式的情況下呼叫 setLocalDescription()setRemoteDescription(),系統也會顯示警告訊息。在 Chrome 50 版中,我們預計會強制要求這些方法的錯誤處理常式引數。

按照 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 已淘汰

TL;DRDocument.defaultCharset 已淘汰,以提升規格遵循情形。

意圖移除 Chrome 狀態追蹤工具 CRBug 問題

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

使用 document.characterSet 將會取得 HTTP 標頭中指定的第一個值。如果該元素不存在,您會收到 <meta> 元素的 charset 屬性中指定的值 (例如 <meta charset="utf-8">)。最後,如果沒有任何可用值,document.characterSet 就會成為使用者的系統設定。

Gecko 尚未支援這項屬性,且 Google 並未明確指定這項屬性,因此會在 Chrome 49 版中從 Blink 淘汰這項屬性 (2016 年 1 月推出 Beta 版)。在 Chrome 50 中移除該資源之前,主控台會顯示以下警告訊息:

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

如要進一步瞭解不需要說明的理由,請前往 GitHub https://github.com/whatwg/dom/issues/58

已移除 getStorageUpdates()

TL;DRNavigator.getStorageUpdates() 已移除,因為其不再位於導覽器規格中。

意圖移除 Chrome 狀態追蹤工具 CRBug 問題

如果這樣做會影響到有人會吃我的帽子,getStorageUpdates() 從未曾在網路上使用 (如果有的話)。

若要引用 HTML5 規格的舊版本,請按照下列步驟進行:

聽起來很酷吧?規格甚至使用「whence」一詞 (在這個情況下,只有規格中的唯一例項)。在規格層級,StorageMutex 會控制封鎖儲存空間的存取權 (例如 localStorage 和 Cookie),而這個 API 有助於釋放該互斥鎖,因此其他指令碼不會遭到此 StorageMutex 封鎖。但從未實作過,IE 或 Gecko 並不支援,而 WebKit 的 (因此也因此 Blink) 的實作並非人工管理。

該映像檔已從規格中移除一段時間,且已從 Blink 完全移除 (最久不人工處理,即使有呼叫也會略過)。

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

Object.observe() 已淘汰

TL;DRObject.observe() 已淘汰,因為其已從標準化測試群組中移除,並將在日後推出的版本中移除。

意圖移除 Chrome 狀態追蹤工具 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,且現在想尋找轉換路徑,請考慮使用 polyfill 例如 MaxArt2501/object-observepolymer/observe-js 等包裝函式程式庫。