我的家園

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

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

HTML5的標(biāo)準(zhǔn)有兩個版本，一個是由W3C發(fā)布的，另一個則是由WHATWG發(fā)布的。WHATWG現(xiàn)有的HTML5標(biāo)準(zhǔn)中補(bǔ)充了一些W3C標(biāo)準(zhǔn)中沒有的APIs（這些APIs其實W3C也有涉及，只是被單獨(dú)列在一個補(bǔ)充標(biāo)準(zhǔn)中了）。

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

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

HTML5標(biāo)準(zhǔn)中的APIs

首先看看W3C的HTML5規(guī)范中的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的多媒體元素中的一部分，其中包括視頻和音頻元素。這些元素本身實現(xiàn)起來并不復(fù)雜，但是這些APIs可以使用JavaScript方法，這是很多人不太了解的。其中包括play()、pause()、load() 以及canPlayType()這些方法。許多方法不僅可以使用多媒體類型屬性，還可以使用許多其他的屬性（例如poster屬性），這些方法在視頻元素中尤其常見。通過在API中使用合適的事件和屬性，開發(fā)者能夠?qū)崿F(xiàn)多媒體的自定義控制。

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

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

當(dāng)瀏覽器使用本地字幕時，這個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一直受到很多關(guān)注。它最初是由Microsoft的IE5推出的，現(xiàn)在Firefox，Safari和Chrome都已經(jīng)支持這一功能了。那么這個API究竟是做什么的呢？

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

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

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

• 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的界限變得越來越模糊，應(yīng)用程序支持離線訪問已經(jīng)成為大勢所趨。離線Web應(yīng)用程序（Offline Web Applications）規(guī)范詳細(xì)介紹了這一技術(shù)，即應(yīng)用程序緩存功能。

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

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

• 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核心標(biāo)準(zhǔn)的一部分。其中有些功能有必要在這里提一提，比如contenteditable 屬性，在創(chuàng)建Web apps就非常有用。IE瀏覽器從5.5版本推出以后就一直支持這一屬性，還有其他五大主流瀏覽器都支持這一屬性。將該屬性設(shè)置為true表示相應(yīng)的元素是可編輯的。發(fā)布者可以在本地存儲中加入這一屬性，從而跟蹤文檔的變化。

想了解更多信息，可以查看最新的標(biāo)準(zhǔn)，但是其中有些部分已經(jīng)被劃分給HTML Editing APIs了。

歷史

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

HTML5以前的歷史API只是幫用戶回到之前的頁面或是之后的頁面，以及檢查歷史信息的長度。而HTML5則加入了增刪用戶歷史信息的方法，可以保存部分?jǐn)?shù)據(jù)用于重構(gòu)一個頁面狀態(tài)，或是更新URL時無需刷新頁面。這個API使用起來非常簡單，并且可以用它開發(fā)非常復(fù)雜的應(yīng)用程序。

關(guān)于歷史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類型和協(xié)議處理程序注冊

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

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

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

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

WHATWG規(guī)范中的APIs

現(xiàn)在，已經(jīng)介紹過W3C和WHATWG兩個版本HTML5協(xié)議中共有的一些標(biāo)準(zhǔn)了。接著將介紹一些附加的APIs，這些APIs被WHATWG收錄在正式的協(xié)議文檔中，而W3C則將他們細(xì)分為一些更加易于管理的協(xié)議。這兩個版本中的APIs用途和主要內(nèi)容都是相同的。

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

遵循HTML5規(guī)范的APIs

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

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

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

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

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

總結(jié)

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

文章來源：netmagazine

譯文出自：WebAppTrend