chapter 1 移動頁面開發

• 頁面佈局
• 頁面除錯
• 常用庫和框架

1.3 常用庫和框架

1.3.1 jQuery Mobile

jQuery Mobile是jQuery 框架的一個元件（而非jquery的移動版本）。這個框架已經很老了，本人也不明白騰訊互娛為什麼放在9月份出的新書上講，而且還花了很大篇幅講這個框架，對於這個框架還是不推薦的。jQuery Mobile最為人詬病的是他較大的包和較少的功能。

jquery mobie沒有一套完整的sdk（IDE，執行時，轉義過程），無法真正投入到app開發中

jquery mobile本身精簡度不夠，適合wap網頁開發，不適合本地

jquery mobile速度也不夠快。

1.3.2 Zepto

• Zepto更輕量級
• Zepto是jQuery的精簡，針對移動端去除了大量jQuery的相容程式碼
• 部分API的實現方式不同

Zepto vs jQuery：
1 . 針對移動端，zepto有一些基本的觸控事件進行觸控式螢幕互動（tap,swipe）,但zepto是不支援ie瀏覽器的。

2 . dom操作的區別，新增id時，jQuery不生效，zepto生效。

  (function($) {
       $(function() {
           var $insert = $('<p>jQuery 插入</p>'
 
, {
               id: 'insert-by-jquery'
           });
           $insert.appendTo($('body'));
       });
  })(window.jQuery);   
  // <p>jQuery 插入<p>

 Zepto(function($) {  
     var $insert = $('<p>Zepto 插入</p>', {
         id: 'insert-by-zepto'
     });
     $insert.appendTo($('body'
 
));
 });
 // <p id="insert-by-zepto">Zepto 插入</p>

3 . 事件觸發不一樣。jQuery的on方法監聽load事件的處理函式不會執行，Zepto的on方法監聽load事件的處理函式會執行。

4 . 事件委託的不一樣。在Zepto中，當a被點選後，依次彈出了內容為”a事件“和”b事件“，說明雖然事件委託在.a上可是卻也觸發了.b上的委託。但是在 jQuery 中只會觸發.a上面的委託彈出”a事件“。Zepto中，document上所有的click委託事件都依次放入到一個佇列中，點選的時候先看當前元素是不是.a，符合則執行，然後檢視是不是.b，符合則執行。而在jQuery中，document上委託了2個click事件，點選後通過選擇符進行匹配，執行相應元素的委託事件。

 var $doc = $(document);
 $doc.on('click', '.a', function () {
     alert('a事件');
     $(this).removeClass('a').addClass('b');
 });
 $doc.on('click', '.b', function () {
     alert('b事件');
 });

5 . width()和height()的區別：zepto由盒模型（box-sizing）決定，用.width()返回賦值的width，用.css(‘width’)返回加border的結果。jQuery忽略盒模型，始終返回內容區域的寬高（不包含padding和border）

6 . offset()的區別：zepto返回{top,left,width,height}；jQuery返回{width,height}

7 . zepto無法獲取隱藏元素寬高，jQuery可以獲取。

8 . zepto沒有給原型定義extend方法，jQuery有。

9 . Zepto 的each 方法只能遍歷 陣列，不能遍歷JSON物件。

10 . Zepto在操作dom的selected和checked屬性時儘量使用prop方法，在讀取屬性值的情況下優先於attr。

1.3.3 Cocos2d

Cocos2d-JS 是整合了Cocos2d-html5 和Cocos2d-x JavaScript Bindings（JSB）的遊戲引擎，擁有清晰的工作流程，提供一致的開發體驗，一次編碼可將遊戲同時部署在網頁和原生應用渠道。
Cocos2d-JS 是跨全平臺的遊戲引擎，採用原生JavaScript語言，可釋出到包括Web平臺，iOS，Android，Windows Phone8，Mac，Windows等平臺，引擎基於MIT開源協議，完全開源，免費，易學易用，擁有活躍的社群支援。Cocos2d-JS讓2D的遊戲程式設計門檻更低，使用更加容易和高效。和其他類似遊戲框架相比，它定義了更加清晰的2D遊戲程式設計的基本元件，採用易學易用的API設計，並採用全球領先、具備原生效能的指令碼繫結解決方案實現遊戲的跨原生平臺釋出，開發效率更高，使用上最簡單。

Cocos2d-JS是Cocos2d-x的JavaScript版本，融合了Cocos2d-HTML5和Cocos2d-x JavaScript Bindings（JSB）。它支援Cocos2d-x的所有核心特性並提供更簡單易用的JavaScript風格API，基於Cocos2d-JS的框架，您可以方便的使用JavaScript語言進行遊戲開發，快速構建原型進行驗證，並讓您的遊戲跑在所有支援HTML5規範的瀏覽器上。

1.3.4 CreateJS

CreateJS 是一款基於canvas的開發引擎，極大地簡化和降低了html5 canvas 專案的開發難度和成本。
CreateJS是基於HTML5開發的一套模組化的庫和工具。
基於這些庫，可以非常快捷地開發出基於HTML5的遊戲、動畫和互動應用。
中文網：http://www.createjs.cc/
英文官網：https://createjs.com/
createjs中包含以下四個部分：
EaselJS：用於 Sprites、動畫、向量和點陣圖的繪製，建立 HTML5 Canvas 上的互動體驗（包含多點觸控）（負責圖形、事件、觸控及濾鏡等功能）
TweenJS：用於做動畫效果（補間動畫）
SoundJS：音訊播放引擎（音訊控制）
PreloadJS：網站資源預載入（檔案載入）

• EaselJS
  
  • EaselJS提供了一套完整的，層次化的顯示列表的互動方式 來更簡單的處理HTML5畫布。一個JavaScript庫,使HTML5 Canvas標籤變得更簡單。 EaselJS 具有豐富的圖形和HTML5畫布互動工作提供直接的解決方案。它提供了一個API，開發者熟悉JavaScript，但包含的情感。
• TweenJS
  
  • TweenJS類庫主要用來調整和動畫HTML5和Javascript屬性。提供了簡單並且強大的tweening介面。TweenJS是使用JavaScript中的一個簡單的補間動畫庫。它的開發與EaselJS庫很好的整合，但不依賴於或特定於它。 它支援數字物件的屬性和CSS樣式屬性賦值。
• SoundJS
  
  • SoundJS提供了簡單而強大的API來處理音訊。通過外掛來執行實際的音訊實現，無需學習平臺相關的知識，簡單直接的處理聲音。SoundJS摘要HTML5的聲音實現，使新增一致的跨瀏覽器的聲音到您的遊戲或豐富的經驗更容易。
• PreloadJS
  
  • PreloadJS是一個用來管理和協調相關資源載入的類庫，它可以方便的幫助你預先載入相關資源，例如：圖片、檔案、音訊、資料等等。它採用xhr2提供真正的進展資訊可用時，或回落到標籤載入和緩和的進步時，它不是。它允許多個佇列，佇列的多個連線，暫停，和更多。