12 HTML5的高级功能介绍
作为一名Web开发者能掌握前面介绍过的HTML5技术,就几乎可以满足我们的需求,当然,HTML5的内容远不指这些,如果你从事一些HTML5游戏开发, 或基于移动设备的APP应用开发,你还需要了解更多HTML5的内容。 像绘制图形、本地存储、离线应用程序、通信API、处理线程、获取地理位置信息等。
- 绘制图形
如果人见过基于HTML5的游戏,多数都是通过HTML5新增元素canvas元素实现的, 这个元素有一套编程接口(Canvas API), 专门用来绘制图形, 可以实现非常漂亮的图形与图像, 创建出更多丰富多彩、赏心悦目的下一代Web页面。在canvas元素里进行绘画,并不是指拿鼠标来作画,canvas元素只是一个无色通明区域,是JavaScript语言的画布,需要利用JavaScript编写脚本进行绘画。
- 本地存储与离线应用
在HTML5中除了canvas元素之外, 另一个新增的非常重要的功能是可以在客户端本地保存数据。 在HTML5中与本地存储相关的有两个重要内容,分别是Web Storange与本地数据库。基中Web Storange存储机制是对HTML4中cookies存储机制的一个改善。本地数据库是HTML5新增的功能,可能使用它在客户端本地建立一个数据库,实现原本必须保存在服务器端数据库中的内容,可以直接保存在客户端本地了, 这就大大减轻了服务器端的负担, 提高了访问数据库的速度。现在Web应用程序已经变得越来越复杂, 如果没有和Internet建立连接, 就不能使用这个Web应用程序,在HTML5中新增加的API,利用本地缓存机制很好地解决了这个问题, 让Web应用程序在离线状态时也可能正常工作。 就是把所有构成Web应用程序的资源文件, 像HTML文件、CSS文件和JavaScript脚本等放在本地缓存中,当服务器没有和Internet建立连接时, 也可以利用本地缓存中的资源文件来正常运行Web应用程序。
- 通信API
在HTML5中提供了网页文档之间互相接收与发送信息的功能, 使用这个功能, 只要获取到网页所在窗口对象的实例, 不仅同源的Web网页之间可以互相通信, 甚至可以实现跨域通信。HTML5新增两个和通信相关的功能, 跨文档消息传输功能与使用Web Sockets API来通过socket端口传递数据的功能。使用跨文档消息传输功能, 可以在不同网页文档、不同端口、不同域之间进行消息的传递。使用Web Sockets API可以让客户端与服务器通过Socket端口来传递数据,这样做就可以实现数据推送技术,服务器不再是被动地等待客户端发出的请求,只要客户端与服务器建立了一次连接之后, 服务器端就可以在需要的时候,主动地将数据推送到客户端, 直到客户端显示关闭这个连接。
- 处理线程
在使用HTML4与JavaScript编写的Web程序中, 因为所有的处理都是在单线程内执行的,如果花费时间比较长的话, 程序界面会处于长时间没有响应的状态,而当时间长到一定程度,浏览器还会跳出一个脚本运行时间过长的提示框, 用户就不得不中断正在执行的处理。为了解决这个问题, HTML5新增了一个Web Workers API, 用户可以很容易地创建在后台运行的线程(在HTML5中被称为worker), 创建一个不会影响前台处理的后台程序, 并且在这个后台线程中还能创建多个子线程,你可以将耗时较长的处理交给后台线程去运行, 对用户在前台页面中执行的操作就完全没有影响了。
- 获取地理位置信息
HTML5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。如果浏览器支持, 且设备具有定位功能,就能够直接使用这组API业获取当前位置信息。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。基于此特性可以开发基于位置的服务应用。