Vanessa

大前端的点滴生活

HTML5 APIs 程序员指南

在公司都是纠结各种 IE, 很久没看 HTML5 了。下文不错


转自:http://webapptrend.iteye.com/blog/1386423




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。


多媒体 API


多媒体 API 是 HTML5 的多媒体元素中的一部分,其中包括视频音频 元素。这些元素本身实现起来并不复杂,但是这些 APIs 可以使用 JavaScript 方法,这是很多人不太了解的。其中包括<strong>play()</strong>  ,pause()  ,<strong>load()</strong>  以及<strong>canPlayType()</strong> 这些方法。许多方法不仅可以使用多媒体类型属性,还可以使用许多其他的属性(例如<strong>poster</strong> 属性 ),这些方法在视频 元素中尤其常见。通过在 API 中使用合适的事件和属性,开发者能够实现多媒体的自定义控制。


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



文本轨迹 API


文本轨迹 API(编者译,原文为 text tracks API)常常和多媒体 API 一起配合使用。这个 API 可以与视频音频 元素的 text tracks(例如副标题或是字幕)交互。你可以获取一个多媒体元素的文本轨迹长度或是数量,或者是它的文本轨迹(副标题,字幕,描述,章节以及元数据)类型<strong>kind</strong>  )、语言<strong>language</strong> )、状态<strong>readyState</strong> )、模式<strong>mode</strong>  )和标签<strong>label</strong> )。


当浏览器使用本地字幕时,这个 API 就派上用场了,WebVTT 就是一个很好的例子。你还可以快速浏览以下这些资源:



拖放功能


拖放 API 一直受到很多关注 。它最初是由 Microsoft 的 IE5 推出的,现在 Firefox,Safari 和 Chrome 都已经支持这一功能了。那么这个 API 究竟是做什么的呢?


就像它的名字所说的,这个 APi 在浏览器中实现本地的拖放功能。只需要将一个可拖放 属性设置为true ,用户就可以移动浏览器中任意一个元素了。你还可以目标区域加入一些事件句柄,用来告诉浏览器哪些区域能够放置用户拖放的元素。


如果不局限在浏览器内部看这一功能,这个 API 的作用将更加凸显。使用拖放 API,用户可以将桌面上的一副图像直接拖入浏览器中,或是将浏览器中的一个新建图标拖到桌面上,并且能够自动加载相应的内容信息形成一个新的应用程序快捷方式。


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



离线 Web Apps/Apps 缓存


随着 native apps(包括移动和桌面版本)和 web apps 的界限变得越来越模糊,应用程序支持离线访问已经成为大势所趋。离线 Web 应用程序(Offline Web Applications)规范详细介绍了这一技术,即应用程序缓存功能。


应 用程序缓存功能是通过一个简单的列表文件实现的,该文件列出了应用程序离线工作所需的文件。这样发布者就能够确保他们的网站可以支持离线访问了。这个列表 文件能够引导浏览器保留一份文件的副本,这样用户下次就可以脱机访问这些内容了。当用户没有连入网络时,浏览器就将本地的副本显示给用户。理论上讲,即使 是在地铁或是其他网络不佳的环境下,你也能完成邮件编写工作了,甚至还可以玩 web 版的愤怒小鸟。


现在浏览器已经对这一功能有了很好的支持,尤其是在移动领域(Firefox, Safari, Chrome, Opera, iPhone, 和 Android),你现在就可以使用这一功能了。下面是一些相关的资料:



UI


和离线功能一样,UI 也是 HTML5 核心标准的一部分。其中有些功能有必要在这里提一提,比如<strong>contenteditable</strong>  属性,在创建 web apps 就非常有用。IE 浏览器从 5.5 版本推出以后就一直支持这一属性,还有其他五大主流浏览器都支持这一属性。将该属性设置为 true 表示相应的元素是可编辑的。发布者可以在本地存储中加入这一属性,从而跟踪文档的变化。


想了解更多信息,可以查看最新的标准 ,但是其中有些部分已经被划分给HTML Editing APIs 了。


历史


浏览器的后退按钮是一个使用非常频繁的工具。HTML5 的历史 API(History API)可以帮助开发者管理用户的浏览器会话的历史状态。


HTML5 以前的历史 API 只是帮用户回到之前的页面或是之后的页面,以及检查历史信息的长度。而 HTML5 则加入了增删用户历史信息的方法,可以保存部分数据用于 重构一个页面状态,或是更新 URL 时无需刷新页面。这个 API 使用起来非常简单,并且可以用它开发非常复杂的应用程序。


关于历史 API 的更多信息:



MIME 类型和协议处理程序注册


这个 API 允许网站将自己注册成为一些方案的处理程序。下面是一个使用了<strong>registerProtocolHandler</strong>  方法的例子:


一个在线电话消息服务可以将自己注册成一个 sms 方案的处理程序,这样当用户点击这个链接以后,就能访问它的 Web 网站(W3C HTML 协议 )了。


smstelirc 这类方案被列入白名单。网站还可以使用<strong>registerContentHandler</strong>  方法将自己注册为特定内容的处理程序。


想要了解 MIME 类型和协议处理程序注册方法,可以先看看HTML5 规范



WHATWG 规范中的 APIs



现在,已经介绍过 W3C 和 WHATWG 两个版本 HTML5 协议中共有的一些标准了。接着将介绍一些附加的 APIs,这些 APIs 被 WHATWG 收录在正式的协议文档中,而 W3C 则将他们细分为一些更加易于管理的协议。这两个版本中的 APIs 用途和主要内容都是相同的。




遵循 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 目前还没有完全成熟,希望这篇文章能够让你对此更加有兴趣,并对这些将加入到浏览器中的功能更感兴趣。


文章来源:The developer's guide tothe HTML5 APIs


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步