|
|
如今大熱的HTML5到底美在哪里？HTML5到底能為實際的移動開發帶來哪些改變？來自阿里云云手機服務運營部的前端開發工程師正邪 （廖健）分享了他眼中的HTML5之美，主要講訴HTML5的常見原理并從CSS、JavaScript和框架三個方面做了細致講解：
說到HTML5一般都會提到它新增了一些新的標簽，這些標簽能夠減少文檔的大小，也可以節省一些CSS定義，但是這個好處不足以說明HTML5在技術變革上帶來的影響，我們還是先要明白HTML5的原理到底是怎樣的，它帶來的變革為什么會這么大？
常見的原理
HTML5的產生以及它的設計完全是遵循了一些常見的原理，這些原理在李松峰老師的博客上有詳細地闡述。
首先第一條原理是：發送時保守、接收時開放。
作為工程師，發送給瀏覽器的文檔應該盡量的嚴謹，但是瀏覽器作為接收方，應該持有一個開放的姿態，而不會因為某個文檔有問題，到瀏覽器窗口里面就不顯示了，只是留下一片空白給用戶。既然HTML存在標簽沒有正常閉合的可能性，也存在屬性丟失的情況，只要文檔沒有產生二義性，瀏覽器應該猜測到最終的行為并做出正確處理，在技術層面瀏覽器有理由這么做。
第二，避免不必要的復雜性。
我們在編寫的HTML的時候，可能會定義一個很長很長的文檔類型聲明，這個文檔類型聲明是給瀏覽器看的，如果能夠簡化它，在創作的時候就能省下一些時間，而且也不用浪費力氣去記那些難記的字符。實際上，省略大多數字符，瀏覽器也能按照我們期望的那樣去運行。
還有script標簽，我們可能會設置它的type為“text/Javascript”，實際上也是不必要，如果type屬性沒有被聲明，默認就按JavaScript處理。類似的東西有很多，在文檔里面能省掉的我們就應該大膽地省掉，這樣不僅是在創作這個文檔的時候，能夠給我們帶來這些方便，而且在共同維護的時候也能帶來一些益處。
現在HTML5這么火，很多人就拿它跟Flash去做對比，說Flash多么多么爛，說HTML5多么多么好。實際上我們創作的內容最后是給用戶去看的，如果這個東西用戶覺得好，不管用什么技術我覺得都是次要的。
最后我們要的是將服務推送到用戶面前，而不是要說某種技術多么好，可以殺死另一個技術。實際上在這里，它們的協同工作才是符合HTML5的設計思想，在這個層面上我覺得Flash也是HTML5中的一員。
第四，大多數人的意見和可運行的代碼。
沒有HTML5規范的時候，瀏覽器廠商可以各自為陣，可以加入了自己的標準，雖然這些標準不是W3C制定的，但是大多人都有這些需求，它們能解決實際問題。所以也刺激W3C加入到這些標準的制定中去。
技術細節
CSS
有位測試工程師報了個bug給開發工程師。說頁面上的單選框樣式太難看了，建議改一下，換個顏色。開發工程師當時就暈倒了，說這個是瀏覽器默認的，改不了。改不了怎么辦？只能把bug打回去。
基于CSS3的特性，現在完全可以改變瀏覽器控件的默認外觀。
然后是布局。改變樣式是CSS的強項，也是它的職責所在。我們可以使用百分比做彈性布局。現在設備比較多，有iPad、iPhone、還有其各種屏幕尺寸的安卓，假如我想用HTML5的技術做一個應用，適用于所有平臺，這個時候百分百肯定是不夠的，而精準的彈性布局又顯得很重要。
CSS3有一個box-flex的屬性，假設有個容器，里面有三個div，在設置了margin的同時將它們的box-flex設置成1，看到的效果就是三個元素均等分，我還可以改變它的比例，比如將第一個元素固定寬度，剩下的兩個元素也可以均等分。除了從左往右布局，使用cloumn-count可以做到從上往下布局。
box-flex可以解決一部分屏幕適配的問題，如果想做到更精準的布局，比如說在小屏幕下的布局是一個樣子，大屏幕下可能加入了更多的元素，或者更復雜了，甚至大小、顏色、位置都變了。這個時候可以使用Media Queries的技術。我們可以先定義某個樣式，然后在某種屏幕上面覆蓋默認樣式，或者完全使用另一套樣式。
除了CSS3這些奇妙的屬性，用它來設計一些復雜背景也是非常適合的。這里有一個我同事開發的Chrome插件叫Coda Cola，他還為這個插件做了一個分享的網站。別人根據這個插件，做出了一些比較酷的CSS效果，可以再分享出來。
JavaScript
說了CSS3，再說說JavaScript。大家說JavaScript美嗎？好像我們對它的印象也不是很好。不僅前端，后端對JavaScript的印象也好不到哪去，甚至會更糟糕。
首先它的執行效率比較慢。
然后它的API接口比較爛，比如我要查找某個元素，可以用getElementById，getElementsByTagName, 這么一長串。除了很長，我還要把第三個參數指定為false。現在做應用的話，我們一般都會選擇用框架來幫助自己進行開發，從那些復雜的語法中解脫出來。
再者，JavaScript調試比較困難，JavaScript邊解釋變執行，代碼一多，方法之間的調用層級變深，如果出錯，就很難定位到錯誤所在。特別是在沒有firebug等調試工具之前，找錯誤有時候就跟做噩夢一般。JavaScript雖然有這么多弊病，但是它現在還在快速發展。到現在，我們有很多種的框架可以選擇，這里面肯定有大家喜愛的框架。但在HTML5到來的時刻，我們有一些更好的選擇。比如說做元素查找，以前可能用到框架，現在不用框架，使用原生的API也可以很方便地做到。這是第一點，就是有些功能不再需要框架做支持了。
第二，JavaScript中加入一些新的特性，比如說LocalStorage。沒有LocalStorage的時候，我們可以使用Cookie在客戶端記錄一些用戶相關的數據，但是Cookie記錄的容量有限，而且HTTP請求會攜帶cookie數據。在需要保存大量數據或者設計離線應用的時候，LocalStorage就非常有用了，LocalStorage的容量比較大，在移動平臺上，至少有2M的存儲空間。
框架
雖然說有了一些原生的API，也有了一些新的功能，但是在開發的時候，我們還是要借助一些框架來提高工作效率。有一個叫Zepto的框架，是我們在項目中經常會用到的框架。它的API幾乎跟jQuery一樣，跟jQuery相比，Zepto去除了一些移動平臺上不必要的代碼。除此之外，它還支持了tap、swipe等手勢。 在移動平臺上，我們也可以使用Canvas技術做一些游戲。
在移動互聯網上，手機跟PC有一些特征上的差異。用到手機特有的功能，我們可以做一些很有意思的東西。比如說我想獲得地理定位，還有傳感器、查詢通訊錄、拍照，這些都是手持設備特有的功能，雖然W3C有制定這些API的規范，但是目前沒有瀏覽器已經完整實現。如果使用PhoneGap的話，我們就能使用到這些API了。
我這里有一個視頻，演示的是使用PhoneGap做的一個指南針應用。我在Chrome上裝了一個叫Ripple的插件，它是一個PhoneGap模擬器插件。裝好這個插件之后，就可以在瀏覽器上進行中開發了，這個插件模擬了設備的大小和外觀，并且加入了device特性的調試環境。在界面上，左右都有很復雜的控件，操作它們可以模擬device特性。就這樣一個應用，只需要大概20行代碼。
然后打包也很簡單，PhoneGap官方有個在線的打包工具，它架設在Amazon云計算平臺上，我們只需要把源代碼的zip包傳上去，然后就能下載打包好的應用程序安裝文件。
所以說，使用HTML5技術做一個安卓應用真的是非常簡單，基于PhoneGap，可以連SDK也不用下，并且能做到直接開發、打包，不過一臺安卓手機還是需要的，因為我們還是需要部署上去看看真實效果。
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
