2.4 HTML5移动Web开发框架
软件系统发展到今天已经很复杂了，特别是服务器端软件，涉及的知识、内容和问题都比较多。在某些方面使用别人成熟的框架，就相当于让别人帮自己完成了一些基础工作，只需要集中精力完成系统的业务逻辑设计。框架就是这种思维实现的载体，而且框架一般都是成熟、稳健的，可以处理系统的很多细节问题，如事物处理、安全性和数据流控制等。另外，框架经过很多人的使用，结构和扩展性都很好，而且还是不断升级的，可以直接利用别人升级代码带来的好处。
本节将介绍几个HTML5移动Web开发框架，分别是jQuery Mobile、Sencha Touch和Junior。
2.4.1 jQuery Mobile
在介绍jQuery Mobile之前，要先讲解一下jQuery。jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简洁的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery一经推出，就迅速发展起来，得到了Google、Intel、IBM和Microsoft等公司的支持，在此基础上，jQuery又推出了支持手机和平板设备的版本jQuery Mobile。jQuery Mobile是一种移动Web开发框架，用于创建Web应用程序，在第8章将详细介绍jQuery Mobile的使用。
2.4.2 Sencha Touch
Sencha Touch是由ExtJS框架发展而来的，ExtJS是基于JS编写的Ajax框架，ExtJS整合了JQTouch、Rapha和Euml库，推出了适用于前沿Touch Web技术的最新框架，命名为Sencha Touch。Sencha Touch是基于最新的Web标准HTML5、CSS3和JavaScript而开发的，是一款移动Web应用开发框架，界面美观，接近原生。
1. 下载安装
Sencha Touch的下载地址为http://www.sencha.com/products/touch，在这个网站上可以免费下载Sencha Touch相关的所有文件。单击右侧的下载链接，会进入一个界面，需要填一下信息。在这里要认真填写邮箱信息，填好之后系统会把下载链接发到所填写的邮箱里，在邮箱里单击下载链接就可以了。
下载完成后，可以先将其部署到本地的服务器上（如果本地没有配置Web服务器，要先配置一下），这样就可以查看Sencha Touch中的实例演示（demo）了。通过实例演示，可以快速掌握Sencha Touch的应用，系统还提供了完整的文档可供参考。
2. 环境搭建
接下来讲解如何开始编写Sencha Touch应用。需要注意的是，Sencha Touch采用的是动态加载技术。例如，正在编辑的文件名为index.html，不是仅仅在index.html内引入需要的JS和CSS文件就可以了，而是要保证所有需要的文件都能在运行时通过目录进行加载(所有需要动态加载的文件都在src中)。因此，为了保证动态加载的正常运行，一定要按规定设定工作目录。
在根目录下(touch-2…)创建工作目录Demo，在该文件夹下创建index.html文件和一个JS文件夹，在文件夹内创建文件app.js。
在index.html中，首先要引入必要的文件（注意：这些基本操作不在服务器上进行也能实现功能，完全不涉及数据传输及后台逻辑）。
其中，第一行引入了必要的CSS文件，第二行引入的是JS文件，使用这两个文件就可以搭建出Sencha Touch框架了。app.js是编写代码的JS文件，Sencha Touch是一个JavaScript框架，因此大多数功能、布局等都是通过app.js实现的。
要验证框架是否搭建成功，在app.js中编写下列测试代码。
运行index.html，如果能正确弹出对话框，则表明环境搭建成功。
3. 代码编写
搭建完Sencha Touch框架之后，就可以进行代码的编写了。只要前面的环境搭建成功了，接下来要做的就是慢慢学习这个框架。每一步都是用代码来体验过程，只要每一步都认真完成，就可以掌握Sencha Touch了。
首先要建立index.html文件和对应的app.js文件，搭建Sencha Touch框架，其中app.js的内容大致如下。
在代码的后面给出了相应的注释，其中，launch之前的代码为基本配置，包括App的名称、图标等。launch内的内容就是要编写的应用程序了。这里在Web App中添加了一个panel（面板），利用的就是Sencha Touch中创建组件的方法。在创建组件时，要采用键值对的形式对组件进行各种配置。这里分别设定了以下属性。
● fullscreen：设置该面板是否与屏幕大小相同，这里选择了true。
● id：给创建的这个组件设定id，这个id很重要，每一个组件都要有，方便以后利用ext.js对其进行获取和操作。
● style：通过这个属性可以利用CSS设定组件的一些基本样式。
● html：制定组件中的HTML代码。
通过简单的操作，搭建了一个最基本的Web App界面。
除了上述创建组件的方法外，还有其他的方法。
这里直接使用new关键字，后面跟上要创建的Ext对象的类名，即可创建一个相应的组件，与上述创建方法所达到的效果相同。
以上就是Sencha Touch框架使用的基本方法和规范。
2.4.3 Junior
Junior为前端框架，用来构建基于HTML5的移动Web应用，外观与行为跟本地应用相似。它采用针对移动性能优化的CSS3转换，支持旋转灯箱效果，包含多样的Ratchet UI组件。整个框架使用Zepto（类似jQuery语法的轻量级移动设备JS类库）技术，且整合了backbone.js的视图和路由。Junior十分易于使用，且提供详细的文档及案例，便于学习。
1. 下载安装
Junior的下载地址为http://www.justspamjustin.github.io，下载界面如图2-45所示。
图2-45 Junior下载界面
2. 环境搭建
junior.js文件包含在目录src/javascripts中，在运行junior.js之前，要加载以下文件。
CSS加载方式如下。
至此，Junior框架就搭建完成了，可以编写自己的代码了。
2.4.4 其他HTML5移动Web开发框架
1. 阿里系Web框架Kissy
Kissy是阿里自己开发的前端框架，Kissy是一款跨终端、模块化、使用简单的JavaScript框架。除了完备的工具集合（如DOM、Event、Ajax和Anim等）外，Kissy还面向团队协作做了独特设计，提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的JavaScript框架，Kissy为移动终端做了大量适配和优化，让程序在全终端均能流畅运行。Kissy Mobile是一套面向移动端的功能特性集合，实现灵活配置的转场动画和View的解耦。Kissy 5.0已经全面支持移动端。Kissy架构如图2-46所示。
2. 百度移动Web框架
百度移动Web框架有3个，下面分别进行介绍。
（1）GMU
GMU（Global Mobile UI）是百度前端通用组开发的移动端组件库，具有代码体积小、简单、易用等特点，组件内部处理了很多移动端的bug，覆盖机型广，能大大减少开发交互型组件的工作量，非常适合移动端网站项目。该组件基于zepto的Mobile UI组件库，提供Web App、Pad端简单易用的UI组件。其下载界面如图2-47所示。
图2-46 Kissy架构图
图2-47 GMU下载界面
（2）Clouda+
Clouda+是移动Web应用开发整体解决方案，并特别针对百度轻应用场景进行了优化，旨在让Web App体验和交互媲美Native应用。其下载界面如图2-48所示。
（3）Efe
图2-48 Clouda+下载界面
Efe是百度商业体系前端团队推出的Web框架。Efe是模块化、组合式的移动前端框架，基于Stylus的移动端样式库。Efe提供了JavaScript模块、CSS样式库与开发平台的完整前端解决方案，擅长移动端SPA项目和轻应用；是移动端设计的Mixin风格样式工具库。在Efe的基础上创建了Rider UI，是一个灵活的UI样式库。