HTML5之美在何方

  現在大熱的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了。