Web前端培訓(xùn)：基于HTML5的移動(dòng)Web開(kāi)發(fā)

　　作為新一代的Web技術(shù)標(biāo)準(zhǔn)，HTML5標(biāo)準(zhǔn)定義的規(guī)范非常廣泛，以下標(biāo)準(zhǔn)在目前的移動(dòng)Web瀏覽器中已得到很好的支持。

　　1.多媒體

　　在現(xiàn)在的網(wǎng)站中，音頻和視頻早已成為網(wǎng)站重要的組成部分。但是，長(zhǎng)久以來(lái)音頻和視頻一直依賴(lài)于第三方插件，插件會(huì)給網(wǎng)站帶來(lái)一些性能和穩(wěn)定性的問(wèn)題。HTML5的多媒體中，<audio>和<video>標(biāo)簽的出現(xiàn)讓音頻與視頻網(wǎng)站開(kāi)發(fā)有了新的選擇。<audio>與<video>標(biāo)簽用于播放音頻和視頻，并且HTML5規(guī)范為其提供了可腳本化控制的API。

　　2.canvas

　　過(guò)去很長(zhǎng)一段時(shí)間，網(wǎng)頁(yè)顯示圖像是用jpg、png等嵌入式圖像格式。動(dòng)畫(huà)通常是由Flash實(shí)現(xiàn)的?，F(xiàn)在出現(xiàn)了一種新的圖形格式如canvas，它是HTML5的新增元素。

　　canvas意為畫(huà)布，現(xiàn)實(shí)生活中的畫(huà)布是用來(lái)作畫(huà)的，HTML5中的canvas與之類(lèi)似，可以稱(chēng)其為“網(wǎng)頁(yè)中的畫(huà)布”。有了這個(gè)畫(huà)布便可以輕松地在網(wǎng)頁(yè)中繪制圖形、文字、圖片等。HTML5中提供了<canvas>標(biāo)簽，使用<canvas>標(biāo)簽可以在網(wǎng)頁(yè)中創(chuàng)建一個(gè)矩形區(qū)域的畫(huà)布，它本身不具有繪制功能，可以通過(guò)腳本語(yǔ)言(JavaScript)操作繪制圖形的API進(jìn)行操作。

　　用canvas可以繪制炫麗的頁(yè)面，很適合做一些圖表、動(dòng)畫(huà)、小游戲等。

　　3.本地存儲(chǔ)

　　為了滿(mǎn)足本地存儲(chǔ)數(shù)據(jù)的需求，HTML5規(guī)范中提出了Web Storage存儲(chǔ)機(jī)制。WebStorage速度更快，而且安全，只會(huì)存儲(chǔ)在瀏覽器中而不會(huì)隨HTTP請(qǐng)求發(fā)送到服務(wù)器端。它可以存儲(chǔ)大量數(shù)據(jù)而不會(huì)影響到網(wǎng)站的性能。

　　4.離線應(yīng)用

　　當(dāng)移動(dòng)應(yīng)用遇到無(wú)網(wǎng)絡(luò)狀態(tài)時(shí)就會(huì)癱瘓，為了解決這個(gè)問(wèn)題，HTML5規(guī)范中提供了一種離線應(yīng)用功能。當(dāng)支持離線應(yīng)用的瀏覽器檢測(cè)到清單文件(Manifest File)中的任何資源文件時(shí)，便會(huì)下載對(duì)應(yīng)的資源文件，將它們緩存到本地，同時(shí)離線應(yīng)用也保證本地資源文件的版本和服務(wù)器上保持一致。對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，當(dāng)遇到無(wú)網(wǎng)絡(luò)狀態(tài)時(shí)，Web瀏覽器便會(huì)自動(dòng)切換到離線狀態(tài)，并讀取本地資源以保證Web應(yīng)用程序繼續(xù)可用。

　　5.地理定位

　　獲取定位信息的方式有很多種，精度最高的是GPS技術(shù)，除此之外，還可以通過(guò)基站和Wi-Fi熱點(diǎn)等方式來(lái)獲取位置。在Web上，Geolocation API(地理位置應(yīng)用程序接口)提供了準(zhǔn)確獲取瀏覽器用戶(hù)當(dāng)前位置的功能，而且封裝了獲取位置的技術(shù)細(xì)節(jié)，開(kāi)發(fā)者不用關(guān)心位置信息究竟從何而來(lái)，極大簡(jiǎn)化了應(yīng)用的開(kāi)發(fā)難度。

　　6.移動(dòng)Web框架

　　因?yàn)橛辛薍TML5和移動(dòng)Web瀏覽器的支持，越來(lái)越多的開(kāi)發(fā)者開(kāi)始研究基于移動(dòng)平臺(tái)的Web應(yīng)用框架，例如，基于jQuery頁(yè)面驅(qū)動(dòng)的jQueryMobile，基于Ext JS架構(gòu)的Sencha Touch，加入強(qiáng)大Less混入的Bootstrap，等等。這些移動(dòng)Web框架讓移動(dòng)Web開(kāi)發(fā)更加便捷，并且能適應(yīng)現(xiàn)在市場(chǎng)上的各種屏幕尺寸，大大減少了移動(dòng)Web開(kāi)發(fā)人員的工作成本。