如今大熱的HTML5到底美在哪里？HTML5到底能為實(shí)際的移動(dòng)開(kāi)發(fā)帶來(lái)哪些改變？來(lái)自阿里云云手機(jī)服務(wù)運(yùn)營(yíng)部的前端開(kāi)發(fā)工程師正邪 （廖健）分享了他眼中的HTML5之美，主要講訴HTML5的常見(jiàn)原理并從CSS、JavaScript和框架三個(gè)方面做了細(xì)致講解：

　　說(shuō)到HTML5一般都會(huì)提到它新增了一些新的標(biāo)簽，這些標(biāo)簽?zāi)軌驕p少文檔的大小，也可以節(jié)省一些CSS定義，但是這個(gè)好處不足以說(shuō)明HTML5在技術(shù)變革上帶來(lái)的影響，我們還是先要明白HTML5的原理到底是怎樣的，它帶來(lái)的變革為什么會(huì)這么大？

　　常見(jiàn)的原理

　　HTML5的產(chǎn)生以及它的設(shè)計(jì)完全是遵循了一些常見(jiàn)的原理，這些原理在李松峰老師的博客上有詳細(xì)地闡述。

　　首先第一條原理是：發(fā)送時(shí)保守、接收時(shí)開(kāi)放。

　　作為工程師，發(fā)送給瀏覽器的文檔應(yīng)該盡量的嚴(yán)謹(jǐn)，但是瀏覽器作為接收方，應(yīng)該持有一個(gè)開(kāi)放的姿態(tài)，而不會(huì)因?yàn)槟硞€(gè)文檔有問(wèn)題，到瀏覽器窗口里面就不顯示了，只是留下一片空白給用戶。既然HTML存在標(biāo)簽沒(méi)有正常閉合的可能性，也存在屬性丟失的情況，只要文檔沒(méi)有產(chǎn)生二義性，瀏覽器應(yīng)該猜測(cè)到最終的行為并做出正確處理，在技術(shù)層面瀏覽器有理由這么做。

　　第二，避免不必要的復(fù)雜性。

　　我們?cè)诰帉懙腍TML的時(shí)候，可能會(huì)定義一個(gè)很長(zhǎng)很長(zhǎng)的文檔類型聲明，這個(gè)文檔類型聲明是給瀏覽器看的，如果能夠簡(jiǎn)化它，在創(chuàng)作的時(shí)候就能省下一些時(shí)間，而且也不用浪費(fèi)力氣去記那些難記的字符。實(shí)際上，省略大多數(shù)字符，瀏覽器也能按照我們期望的那樣去運(yùn)行。

　　還有script標(biāo)簽，我們可能會(huì)設(shè)置它的type為“text/Javascript”，實(shí)際上也是不必要，如果type屬性沒(méi)有被聲明，默認(rèn)就按JavaScript處理。類似的東西有很多，在文檔里面能省掉的我們就應(yīng)該大膽地省掉，這樣不僅是在創(chuàng)作這個(gè)文檔的時(shí)候，能夠給我們帶來(lái)這些方便，而且在共同維護(hù)的時(shí)候也能帶來(lái)一些益處。

　　第三，網(wǎng)絡(luò)價(jià)值同達(dá)到網(wǎng)絡(luò)用戶數(shù)量的平方成正比。

　　現(xiàn)在HTML5這么火，很多人就拿它跟Flash去做對(duì)比，說(shuō)Flash多么多么爛，說(shuō)HTML5多么多么好。實(shí)際上我們創(chuàng)作的內(nèi)容最后是給用戶去看的，如果這個(gè)東西用戶覺(jué)得好，不管用什么技術(shù)我覺(jué)得都是次要的。

　　最后我們要的是將服務(wù)推送到用戶面前，而不是要說(shuō)某種技術(shù)多么好，可以殺死另一個(gè)技術(shù)。實(shí)際上在這里，它們的協(xié)同工作才是符合HTML5的設(shè)計(jì)思想，在這個(gè)層面上我覺(jué)得Flash也是HTML5中的一員。

　　第四，大多數(shù)人的意見(jiàn)和可運(yùn)行的代碼。

　　沒(méi)有HTML5規(guī)范的時(shí)候，瀏覽器廠商可以各自為陣，可以加入了自己的標(biāo)準(zhǔn)，雖然這些標(biāo)準(zhǔn)不是W3C制定的，但是大多人都有這些需求，它們能解決實(shí)際問(wèn)題。所以也刺激W3C加入到這些標(biāo)準(zhǔn)的制定中去。

　　技術(shù)細(xì)節(jié)

　　CSS

　　有位測(cè)試工程師報(bào)了個(gè)bug給開(kāi)發(fā)工程師。說(shuō)頁(yè)面上的單選框樣式太難看了，建議改一下，換個(gè)顏色。開(kāi)發(fā)工程師當(dāng)時(shí)就暈倒了，說(shuō)這個(gè)是瀏覽器默認(rèn)的，改不了。改不了怎么辦？只能把bug打回去。

　　基于CSS3的特性，現(xiàn)在完全可以改變?yōu)g覽器控件的默認(rèn)外觀。

　　然后是布局。改變樣式是CSS的強(qiáng)項(xiàng)，也是它的職責(zé)所在。我們可以使用百分比做彈性布局。現(xiàn)在設(shè)備比較多，有iPad、iPhone、還有其各種屏幕尺寸的安卓，假如我想用HTML5的技術(shù)做一個(gè)應(yīng)用，適用于所有平臺(tái)，這個(gè)時(shí)候百分百肯定是不夠的，而精準(zhǔn)的彈性布局又顯得很重要。

　　CSS3有一個(gè)box-flex的屬性，假設(shè)有個(gè)容器，里面有三個(gè)div，在設(shè)置了margin的同時(shí)將它們的box-flex設(shè)置成1，看到的效果就是三個(gè)元素均等分，我還可以改變它的比例，比如將第一個(gè)元素固定寬度，剩下的兩個(gè)元素也可以均等分。除了從左往右布局，使用cloumn-count可以做到從上往下布局。

　　box-flex可以解決一部分屏幕適配的問(wèn)題，如果想做到更精準(zhǔn)的布局，比如說(shuō)在小屏幕下的布局是一個(gè)樣子，大屏幕下可能加入了更多的元素，或者更復(fù)雜了，甚至大小、顏色、位置都變了。這個(gè)時(shí)候可以使用Media Queries的技術(shù)。我們可以先定義某個(gè)樣式，然后在某種屏幕上面覆蓋默認(rèn)樣式，或者完全使用另一套樣式。

　　除了CSS3這些奇妙的屬性，用它來(lái)設(shè)計(jì)一些復(fù)雜背景也是非常適合的。這里有一個(gè)我同事開(kāi)發(fā)的Chrome插件叫Coda Cola，他還為這個(gè)插件做了一個(gè)分享的網(wǎng)站。別人根據(jù)這個(gè)插件，做出了一些比較酷的CSS效果，可以再分享出來(lái)。

　　JavaScript

　　說(shuō)了CSS3，再說(shuō)說(shuō)JavaScript。大家說(shuō)JavaScript美嗎？好像我們對(duì)它的印象也不是很好。不僅前端，后端對(duì)JavaScript的印象也好不到哪去，甚至?xí)愀狻?/p>

　　首先它的執(zhí)行效率比較慢。

　　然后它的API接口比較爛，比如我要查找某個(gè)元素，可以用getElementById，getElementsByTagName, 這么一長(zhǎng)串。除了很長(zhǎng)，我還要把第三個(gè)參數(shù)指定為false。現(xiàn)在做應(yīng)用的話，我們一般都會(huì)選擇用框架來(lái)幫助自己進(jìn)行開(kāi)發(fā)，從那些復(fù)雜的語(yǔ)法中解脫出來(lái)。

　　再者，JavaScript調(diào)試比較困難，JavaScript邊解釋變執(zhí)行，代碼一多，方法之間的調(diào)用層級(jí)變深，如果出錯(cuò)，就很難定位到錯(cuò)誤所在。特別是在沒(méi)有firebug等調(diào)試工具之前，找錯(cuò)誤有時(shí)候就跟做噩夢(mèng)一般。JavaScript雖然有這么多弊病，但是它現(xiàn)在還在快速發(fā)展。到現(xiàn)在，我們有很多種的框架可以選擇，這里面肯定有大家喜愛(ài)的框架。但在HTML5到來(lái)的時(shí)刻，我們有一些更好的選擇。比如說(shuō)做元素查找，以前可能用到框架，現(xiàn)在不用框架，使用原生的API也可以很方便地做到。這是第一點(diǎn)，就是有些功能不再需要框架做支持了。

　　第二，JavaScript中加入一些新的特性，比如說(shuō)LocalStorage。沒(méi)有LocalStorage的時(shí)候，我們可以使用Cookie在客戶端記錄一些用戶相關(guān)的數(shù)據(jù)，但是Cookie記錄的容量有限，而且HTTP請(qǐng)求會(huì)攜帶cookie數(shù)據(jù)。在需要保存大量數(shù)據(jù)或者設(shè)計(jì)離線應(yīng)用的時(shí)候，LocalStorage就非常有用了，LocalStorage的容量比較大，在移動(dòng)平臺(tái)上，至少有2M的存儲(chǔ)空間。

　　框架

　　雖然說(shuō)有了一些原生的API，也有了一些新的功能，但是在開(kāi)發(fā)的時(shí)候，我們還是要借助一些框架來(lái)提高工作效率。有一個(gè)叫Zepto的框架，是我們?cè)陧?xiàng)目中經(jīng)常會(huì)用到的框架。它的API幾乎跟jQuery一樣，跟jQuery相比，Zepto去除了一些移動(dòng)平臺(tái)上不必要的代碼。除此之外，它還支持了tap、swipe等手勢(shì)。 在移動(dòng)平臺(tái)上，我們也可以使用Canvas技術(shù)做一些游戲。

　　在移動(dòng)互聯(lián)網(wǎng)上，手機(jī)跟PC有一些特征上的差異。用到手機(jī)特有的功能，我們可以做一些很有意思的東西。比如說(shuō)我想獲得地理定位，還有傳感器、查詢通訊錄、拍照，這些都是手持設(shè)備特有的功能，雖然W3C有制定這些API的規(guī)范，但是目前沒(méi)有瀏覽器已經(jīng)完整實(shí)現(xiàn)。如果使用PhoneGap的話，我們就能使用到這些API了。

　　我這里有一個(gè)視頻，演示的是使用PhoneGap做的一個(gè)指南針應(yīng)用。我在Chrome上裝了一個(gè)叫Ripple的插件，它是一個(gè)PhoneGap模擬器插件。裝好這個(gè)插件之后，就可以在瀏覽器上進(jìn)行中開(kāi)發(fā)了，這個(gè)插件模擬了設(shè)備的大小和外觀，并且加入了device特性的調(diào)試環(huán)境。在界面上，左右都有很復(fù)雜的控件，操作它們可以模擬device特性。就這樣一個(gè)應(yīng)用，只需要大概20行代碼。

　　然后打包也很簡(jiǎn)單，PhoneGap官方有個(gè)在線的打包工具，它架設(shè)在Amazon云計(jì)算平臺(tái)上，我們只需要把源代碼的zip包傳上去，然后就能下載打包好的應(yīng)用程序安裝文件。

　　所以說(shuō)，使用HTML5技術(shù)做一個(gè)安卓應(yīng)用真的是非常簡(jiǎn)單，基于PhoneGap，可以連SDK也不用下，并且能做到直接開(kāi)發(fā)、打包，不過(guò)一臺(tái)安卓手機(jī)還是需要的，因?yàn)槲覀冞€是需要部署上去看看真實(shí)效果。

it知識(shí)庫(kù)：HTML5之美，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。