HTML5基础,第3部分：HTML5 API的威力

HTML5基础，第3部分：HTML5API的威力上一节：HTML5基础，第2部分：组织页面的输入英文原文：HTML5fundamentals,Part3:ThepowerofHTML5APIs那么，什么是API呢？应用编程接口（applicationprograminterface，API）是访问一个软件应用的编程指令和标准的集合。通过使用API，你就可以设计出由API提供的服务来驱动的产品。HTML5拥有一些新的API，例如：1.一个与新的画布元素一起使用的2D绘图API，用于渲染图形或是其他的视觉图像。2.一个支持离线web应用的缓存机制的API。3.一个播放视频和音频的API，与新的视频和音频元素一起使用。4.一个历史记录API，其把浏览历史变成可访问的，并允许把页面添加到这一历史中。5.一个和draggable属性一起使用的拖放API。6.一个和contenteditable属性一起使用的编辑API。7.键-值对以及内嵌的SQL数据库的客户端存储，使用了JavaScriptAPI。本篇文章重点关注两个API：Geolocation和WebWorker，首先对这些API本身进行分析，然后创建一个包含这两个API的页面。无处不在的业务：GeolocationGeolocationAPI被用来确定和分享地理位置，API返回经度和纬度坐标——这是企业可用来在这一坐标附近的区域提供服务的信息，这类服务通常被称作基于位置的服务（location-basedservice，LBS）。LBS以地理数据源为参考，这些地理数据源被用来标识被监控仪器的物理位置，从而识别出与这一位置相关的人。这一功能赋予感兴趣的各方与这一个人进行交互的机会，这种交互是基于一些以地理位置为中心的兴趣点市场来进行的。商业实际上是为客户创造品质、实用性和价值，并同时为利益相关者、债权人、股东、员工和供应商创造经济和金融利益。以地理位置为驱动力的LBS使得跟踪和监控一个包裹（或者使用了非浏览器设备或浏览器的个人）变得相当容易。从商业化的角度来说，地理位置所涉及的就是使用地理资产来确定某人或是某物所处的位置，然后把这一特定的一组信息出售给想要把这些信息用于社会、商业或是其他目的的的任何人，只要信息的拥有者的这种做法是法律许可的就可以了。地理定位（geolocation）的工作方式GeolocationAPI基于navigator这一全局对象的一个新属性：navigator.geolocation，这一JavaScript的navigator对象提供了一些关于访问者的浏览器和系统的有用信息。Geolocation可以确定使用了IP地址、基于web的数据库、无线网络连接，以及三角定位或是GPS技术的访问者的经度和纬度。应该要注意的一点是，由Geolocation提供的信息的准确性会基于获取信息的手段而发生变化。偶然情况下，在一些位置上，你有可能不能获得明确的地理位置读数或是一点数据都接收不到。脚本可使用navigator.geolocation对象来确定与用户的宿主设备相关的位置信息，在检索到位置信息之后，一个位置对象就会被创建出来，并使用这些数据做填充。navigator.geolocation对象有三个方法：1.getCurrentPosition()2.watchPosition()3.clearWatch()getCurrentPosition()方法getCurrentPosition()方法检索用户的当前位置，但只检索一次。当该方法被脚本调用时，方法以异步的方式来尝试获取宿主设备的当前位置。异步通信意味着发送者和接收者并未同时地加入到这一通信过程中，使用异步通信能让浏览器继续进行其他方面的活动，这样它就无需等待来自接收实体的响应。getCurrentPosition()方法最多可以有三个参数：1.geolocationSuccess：带回当前位置的回调（callback）（必需的）2.geolocationError.有错误发生时使用的回调（可选的）3.geolocationOptions.地理位置选项（可选的）navigator.geolocation.getCurrentPositon()方法使用一个Position对象作为参数来把宿主设备的当前位置返回给geolocationSuccess这一回调，如果有错误发生的话，geolocationError回调会使用一个PositionError对象来做调用。你可以设置geolocationOptions的三个属性：enableHighAccuracy、timeout和maximumAge，这些可选属性相应的作用分别是启用了高的精确性，如果设备支持这种高精确性的话；一个超时时段，这是位置应该被返回的最长等待时间；以及一个最大的时间数，缓存的位置在这一时间段内可被使用。getCurrentPosition()方法的调用如下所示：voidnavigator.geolocation.getCurrentPosition(geolocationSuccess,geolocationError,geolocationOptions);watchPosition()方法watchPosition()方法定期轮询用户的位置，查看用户的位置是否发生改变。其最多可带三个参数。当watchPosition被调用时，其异步地启动一个查看过程，这一过程涉及了一个新的Position对象的获取和一个watchID的创建。如果这一获取操作是成功的，则相关的使用一个Position对象作为参数的geolocationSuccess就会被调用。在失败时涉及的操作则是使用一个非空的geolocationError参数来调用该方法，watchPosition方法使用一个PositionError对象作为参数来生成geolocationError。当设备的位置发生改变时，一个合适的带有新的Position对象的回调就会被调用。watchPosition()方法的调用如下所示：longnavigator.geolocation.watchPosition(geolocationSuccess,geolocationError,geolocationOptions);clearWatch()方法clearWatch()方法终止正在进行的watchPosition()，该方法只能带一个参数。在调用时，其找到之前已经开始了的watchID参数并立即停止它。clearWatch()方法的调用如下所示：voidnavigator.geolocation.clearWatch(watchID)Geolocation数据：Position对象GeolocationAPI返回一个地理上的Position对象，该对象有两个属性：timestamp和coords。timestamp属性表示地理位置数据的创建时间，coords属性又包含七个属性：1.coords.latitude：估计纬度2.coords.longitude：估计经度3.coords.altitude：估计高度4.coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度5.coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度6.coords.heading：宿主设备当前移动的角度方向，相对于正北方向顺时针计算7.coords.speed：以米每秒为单位的设备的当前对地速度这些属性中只有三项是保证有的：coords.latitude、coords.longitude和coords.accuracy，其余的返回null，这取决于设备的能力和其所采用的后端定位服务器。如果可能的话，heading和speed属性可以基于用户之前的位置计算出来。发挥救援作用的webworkerwebworker（web工作线程）补救了并发所引起的问题，webworker是HTML5家族对JavaScript单线程问题的回答：它们在与主页面分开的线程中运行处理过程，保留页面以用于主要的功能，比如说维持一个稳定的UI等。一个webworker是一个在后台加载并执行的JavaScript文件，这些worker允许你动态地加载一个JavaScript，然后使用不会影响到UI的后台进程来执行脚本。webworker的访问是受限的，其只允许传递字符串。因为webworker不使用浏览器的UI线程，所以他们不允许访问DOM。Workers可以使用self和this引用访问worker的全局变量（Workerscanusebothselfandthisreferencesfortheworker'sglobalscope），worker和父页面的通信是通过使用事件模型和postMessage()方法来实现的。因为webworker有多线程行为，因此它们只能访问JavaScript功能的一个子集，webworker可以：1.访问navigator对象2.使用只读的位置对象3.执行XMLHttpRequest以发送HTTP或是HTTPS请求4.使用setTimeout()/clearTimeout()和setInterval()/clearInterval()来设置时间或是时间间隔5.访问应用的缓存6.使用importScripts()方法来导入外部的脚本7.产生其他的webworker（subworker必需有着与主页面一样的来源，且必须放置于与父worker同样的地点。）webworker有两种类型：专用型的worker和共享型的worker。专用型webworker专用型worker与创建它的脚本连接在一起，它可以与其他的worker或是浏览器组件通信，但是他不能与DOM通信。专用型worker的创建方法是把一个JavaScript文件名传递给一个新的worker实例，通过指定worker的执行脚本URI使用Worker()构造函数来创建一个新的worker。要创建一个专用型worker的话，输入下面给出的代码，这一代码创建了一个新的专用的Worker对象：varworker=newWorker('worker.js');共享型webworker共享型webworker和专用型worker一样，不能访问DOM，并且对窗体属性的访问也受到限制。共享型webworker只能与其他来自同一个域的共享型webworker通信，它的创建方法是把一个JavaScript名称传递给一个新的共享型worker的实例来创建。页面脚本可以与共享型webworker通信，而然，与专用型webworker不同的是，通信是通过使用一个端口（port）对象并附加上一个消息事件处理程序来进行的。另外，在使用第一个postMessage()之前，你必须要调用端口的start()方法。在收到webworker脚本的首个消息之后，共享型webworker把一个事件处理程序附加到激活的端口上。一般情况下，处理程序会运行自己的postMessage()方法来把一个消息返回给调用代码，接着端口的start()方法生成一个有效的消息进程。为了创建一个共享型webworker，你必须要创建一个SharedWorker对象而不是一个Worker对象。下面的代码说明了如何创建一个新的SharedWorker对象：varworker=newSharedWorker('worker.js');构造一个包含了这两个API的页面你将设计一个包含了Geolocation和WebWorkerAPI的基本工作模式的页面，此外，你还会用到GoogleMapAPI来渲染作为地图收集来的数据。页面的组织如图1所示，其包含了一个使用header/header标签来创建的Header区，一个使用section/section标签来创建的Section区，以及一个使用aside/aside标签来创建的Aside区。图1.API页