我的家園

導讀：本文作者Rich Clark是一位HTML5專家，他非常了解HTML5規范中的APIs。在這篇文章中，他將介紹這些APIs的用途以及最新進展情況。

有關HTML5中的語法元素相信大家已經看到過不少介紹了，但是關于HTML5的APIs的介紹就不那么常見了，而HTML5規范主要就是由這些APIs構成的。

HTML5的標準有兩個版本，一個是由W3C發布的，另一個則是由WHATWG發布的。WHATWG現有的HTML5標準中補充了一些W3C標準中沒有的APIs（這些APIs其實W3C也有涉及，只是被單獨列在一個補充標準中了）。

除了規范中介紹的APIs以外，還有一些相關的APIs也遵循了HTML5的標準，并也聲稱自己是HTML5的API。有些APIs已經被采用了一段時間了，但是仍然沒有被明確列入規范之中，而有些HTML5則著手準備對其進行改進。

這篇文章并不準備從代碼的角度去介紹這些APIs，而是會分析他們的用途以及進展情況。還會給出一些參考信息方便讀者更加深入地了解自己感興趣的內容。

HTML5標準中的APIs

首先看看W3C的HTML5規范中的APIs。

• Media Elements, W3C
• Everything you need to know about HTML5 video and audio, dev.opera, Simon Pieters
• HTML5 audio and video: what you must know, NetTuts (a chapter from Introducing HTML5), Bruce Lawson and Remy Sharp

文本軌跡API

多媒體API

多媒體API是HTML5的多媒體元素中的一部分，其中包括視頻和音頻元素。這些元素本身實現起來并不復雜，但是這些APIs可以使用JavaScript方法，這是很多人不太了解的。其中包括play()、pause()、load() 以及canPlayType()這些方法。許多方法不僅可以使用多媒體類型屬性，還可以使用許多其他的屬性（例如poster屬性），這些方法在視頻元素中尤其常見。通過在API中使用合適的事件和屬性，開發者能夠實現多媒體的自定義控制。

想要了解更多信息，可以看看下面的文章。

文本軌跡API（編者譯，原文為text tracks API）常常和多媒體API一起配合使用。這個API可以與視頻和音頻元素的text tracks（例如副標題或是字幕）交互。你可以獲取一個多媒體元素的文本軌跡長度或是數量，或者是它的文本軌跡（副標題，字幕，描述，章節以及元數據）類型（kind ）、語言（language）、狀態（readyState）、模式（mode ）和標簽（label）。

當瀏覽器使用本地字幕時，這個API就派上用場了，WebVTT就是一個很好的例子。你還可以快速瀏覽以下這些資源：

• Text Track API, W3C
• Web Media Text Tracks Community Group
• Media Multiple Text Tracks API Wiki, W3C
• The YouTube Caption API, Speech Recognition, and WebVTT Captions for HTML5, Google I/O 2011, Naomi Black, Cynthia Boedihardjo, and Jeffrey Posnick
• Captionator.js Polyfill
• WebVTT and video subtitles, Ian Devlin
• Video subtitling and WebVTT, HTML5 Doctor, Tom Leadbetter

拖放功能

拖放API一直受到很多關注。它最初是由Microsoft的IE5推出的，現在Firefox，Safari和Chrome都已經支持這一功能了。那么這個API究竟是做什么的呢？

就像它的名字所說的，這個APi在瀏覽器中實現本地的拖放功能。只需要將一個可拖放屬性設置為true，用戶就可以移動瀏覽器中任意一個元素了。你還可以目標區域加入一些事件句柄，用來告訴瀏覽器哪些區域能夠放置用戶拖放的元素。

如果不局限在瀏覽器內部看這一功能，這個API的作用將更加凸顯。使用拖放API，用戶可以將桌面上的一副圖像直接拖入瀏覽器中，或是將瀏覽器中的一個新建圖標拖到桌面上，并且能夠自動加載相應的內容信息形成一個新的應用程序快捷方式。

下面的文章更加深入地介紹了這一拖放功能。

• Drag and drop API, W3C
• Native, Drag and Drop, HTML5 Doctor, Remy Sharp
• Drag and Drop, MDN
• The drag and drop API, HTML5 Laboratory, Ian Devlin

離線Web Apps/Apps緩存

隨著native apps（包括移動和桌面版本）和Web apps的界限變得越來越模糊，應用程序支持離線訪問已經成為大勢所趨。離線Web應用程序（Offline Web Applications）規范詳細介紹了這一技術，即應用程序緩存功能。

應用程序緩存功能是通過一個簡單的列表文件實現的，該文件列出了應用程序離線工作所需的文件。這樣發布者就能夠確保他們的網站可以支持離線訪問了。這個列表文件能夠引導瀏覽器保留一份文件的副本，這樣用戶下次就可以脫機訪問這些內容了。當用戶沒有連入網絡時，瀏覽器就將本地的副本顯示給用戶。理論上講，即使是在地鐵或是其他網絡不佳的環境下，你也能完成郵件編寫工作了，甚至還可以玩web版的憤怒小鳥。

現在瀏覽器已經對這一功能有了很好的支持，尤其是在移動領域（Firefox, Safari, Chrome, Opera, iPhone, 和Android），你現在就可以使用這一功能了。下面是一些相關的資料：

• Offline Web Applications, W3C
• Let’s take this offline, Dive into HTML5, Mark Pilgrim
• Running your web applications offline with HTML5 AppCache, dev.opera, Shwetank Dixit
• Go offline with application cache, HTML5 Doctor, Mike Robinson
• Offline Browsing in HTML5 with ApplicationCache, Sitepoint, Malcolm Sheridan
• Get off(line), Web Directions, John Allsopp

UI

和離線功能一樣，UI也是HTML5核心標準的一部分。其中有些功能有必要在這里提一提，比如contenteditable 屬性，在創建Web apps就非常有用。IE瀏覽器從5.5版本推出以后就一直支持這一屬性，還有其他五大主流瀏覽器都支持這一屬性。將該屬性設置為true表示相應的元素是可編輯的。發布者可以在本地存儲中加入這一屬性，從而跟蹤文檔的變化。

想了解更多信息，可以查看最新的標準，但是其中有些部分已經被劃分給HTML Editing APIs了。

歷史

瀏覽器的后退按鈕是一個使用非常頻繁的工具。HTML5的歷史API（History API）可以幫助開發者管理用戶的瀏覽器會話的歷史狀態。

HTML5以前的歷史API只是幫用戶回到之前的頁面或是之后的頁面，以及檢查歷史信息的長度。而HTML5則加入了增刪用戶歷史信息的方法，可以保存部分數據用于重構一個頁面狀態，或是更新URL時無需刷新頁面。這個API使用起來非常簡單，并且可以用它開發非常復雜的應用程序。

關于歷史API的更多信息：

•  History API, W3C
• Manipulating History for Fun & Profit, Dive into HTML5, Mark Pilgrim
• Introducing the HTML5 History API, dev.opera, Mike Taylor & Chris Mills
• Manipulating the browser history, MDN

MIME類型和協議處理程序注冊

這個API允許網站將自己注冊成為一些方案的處理程序。下面是一個使用了registerProtocolHandler 方法的例子：

一個在線電話消息服務可以將自己注冊成一個sms方案的處理程序，這樣當用戶點擊這個鏈接以后，就能訪問它的Web網站（W3C HTML協議）了。

sms、tel和irc這類方案被列入白名單。網站還可以使用registerContentHandler 方法將自己注冊為特定內容的處理程序。

想要了解MIME類型和協議處理程序注冊方法，可以先看看HTML5規范。

WHATWG規范中的APIs

現在，已經介紹過W3C和WHATWG兩個版本HTML5協議中共有的一些標準了。接著將介紹一些附加的APIs，這些APIs被WHATWG收錄在正式的協議文檔中，而W3C則將他們細分為一些更加易于管理的協議。這兩個版本中的APIs用途和主要內容都是相同的。

• Canvas 2D環境——可以用來在瀏覽器中繪圖。如果不使用2D Context API，canvas 將無法繪圖。它就像是刷子、調色板和顏料，將所有這些繪圖工具都集成在了一起。這個API是非常常用的，幾乎所有的canvas的文章中都有它的不同方法和事件的介紹。這里還有更加詳細的介紹。WHATWG Canvas Element, 2D Context 以及W3C HTML Canvas 2D Context Spec。
• 跨文檔和通道的消息通訊——跨文檔通訊定義了一種在文檔之間通訊的方法，它不受源區域的限制。同樣的，通道消息傳遞使用了獨立的代碼實現直接通訊。WHATWG HTML, Cross document messaging，WHATWG HTML Cross channel messaging以及W3C HTML5 Web Messaging spec。
• Microdata——在文檔中新增了一個語義層，方便搜索引擎，瀏覽器等可以使用提取網頁信息并提高瀏覽器的服務質量。 WHATWG HTML, Microdata以及W3C Microdata spec。
• Web Workers——這是一個在后臺運行的JavaScript調用API。它能夠在不影響前端界面的情況下長期運行任務，從而避免任務執行造成的頁面響應延遲。WHATWG HTML, Web Workers和W3C Web Workers Spec。
• Web存儲——有點類似于cookies。WHATWG HTML, Web Storage和W3C Web Storage spec。
• Web Sockets——允許頁面使用WebSocket協議在瀏覽器和服務器間發送兩路消息。WHATWG Web Sockets和W3C Web Socket API。
• Server sent events服務器端發送事件 ——允許服務器以DOM事件的形式向瀏覽器發送推送通知。WHATWG HTML, Server-sent events和W3C Server-Sent Events。

遵循HTML5規范的APIs

由于篇幅的限制，這里不會將所有與HTML5相關的APIs都列舉出來。其中一些常常被誤以為是HTML5標準APIs的內容有地理位置（Geolocation），索引數據庫（Indexed DB），選擇器(Selectors)，以及文件系統API(Filesystem API)。

W3C成員Mike Smith編著了一個全方位介紹web平臺和瀏覽器技術的綜合列表，非常值得一讀。

演示示例和瀏覽器的支持情況

文章之前提到了部分APIs目前得到瀏覽器支持的情況，但是瀏覽器對APIs的支持是在不斷變化的，想要了解最新的進展，可以查看caniuse。如果你發現有些APIs目前瀏覽器尚不支持，也不必灰心。這里還有一個補充功能用來幫助你模擬本地行為。可以查看HTML5 Cross Browser Polyfills了解這一功能。

可以看看Remy Sharp的HTML5 Demos,通過查看這些源碼進一步了解文章介紹的APIs。

總結

這里只是粗略地介紹了一下這些非常有用而且功能強大的APIs。如果想要更加深入地了解這些APIs的細節，你需要通過代碼去學習。這將給你帶來不一樣的體驗。有些APIs目前還沒有完全成熟，希望這篇文章能夠讓你對此更加有興趣，并對這些將加入到瀏覽器中的功能更感興趣。

文章來源：netmagazine

譯文出自：WebAppTrend