指尖上行--移动前端开发进阶之路（读书笔记）----1.3常用库和框架

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提供真正的进展信息可用时，或回落到标签加载和缓和的进步时，它不是。它允许多个队列，队列的多个连接，暂停，和更多。