jqMobi（App Framework）入门学习（一）

jqMobi（App Framework）入门学习（一）

1. 什么是jqMobi？

jqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架，是个极其快速的查询选择库，支持W3C查询。
jqMobi源码是基于jQuery源码重写的，但是两者又属于不同的产品，jqMobi体积更小，速度更快，兼容性也有所不同。

上面这段话来自百度百科，但是目前由于jqmobi已被收购并不断发展，而且jqmobi并不仅仅局限于查询选择库，所以上面的解释并不是很全面。

2. jqMobi的特点

• 速度快
• 体积小
• 适用于智能手机和平板电脑
• 提供了60个API调用
• 与JQuery相同的语法（个人认为仅是语法结构相同以及jqMobi兼容JQuery，在一些具体函数上的参数不大相同，如$.ajax()，具体可参照两者的官方API）
• 插件可扩展

3. 什么是App Framework？

英特尔2013年2月22日收购HTML 5移动应用公司appMobi HTML5开发工具XDK和相关雇员，之后jqMobi改名为App Framework。说白了jqMobi其实就是App Framework。由于国内目前许多开发者和教程都停留在jqMobi这个名字之上,所以稍微解释一下。

4. App Framework的组成

这个估计会是很多初学者心里的一道坎，初学时都完全搞不懂这货到底是什么，要从何学起，首先是由于App Framework还十分年轻，仅有两年多历史，还处于一个发展初期，所以国内资料甚少，而且都十分老旧，这里也要吐槽一下Intel，App Framework的官网开发指导写的实在是烂到爆，收购了也不好好发展起来。
我们来对照一下jqMobi时的组成结构来认识App Framework的组成：

• jqMobi查询选择库 === App Framework查询选择库（这个也就是网上常说的App Framework所指的内容），这一部分就是API的调用，包括Ajax调用、针对webkit的系统选择器调用等，说白了就是语法函数什么的，你可以理解为这一部分相当于JQuery。

• jqUi === af.ui ,这一部分就是用户界面程序库，提供了按钮、部件、固定的header/footer以及可控的滚动部件。

• jqPlugin === Plugins，这一部分是插件,官方下载的包自带了一些插件，包括popup弹出窗口、scroller滚动区域等一些常用插件，当然你不仅可以自己上网找更多插件也可以自己开发插件，这一部分和上面的af.ui你可以理解为相当于Jquery Mobile。

综上，你可以将App Framework理解为类似于JQery和Jquery Mobile结合起来的一个HTML5移动跨平台开发的Javascript框架，当然并不是等同。

5. 下载App Framework

这里是App Framework的官方网站：http://app-framework-software.intel.com/
直接点击下载按钮下载就可以了，或者可以上github上下载。
写这篇博文的时候最新版本是2.1.0，下载下来解压后文件目录如下：

自此，我们就可以直接打开index.html来更深入地了解App Framework的各项内容，之前也说过官方文档写的很烂，所以我建议大家可以直接使用这个包里的内容进行App Framework的学习，在此强烈建议使用chrome浏览器进行学习，以便获得最佳的体验。

6. 了解App Framework的目录结构

• build文件夹，顾名思义，这里面的文件是你使用App Framework进行开发所需要的文件内容，这里面就根据你的需要进行相关应用就行了，具体使用后面会讲到。

• documentation文件夹，这个可以算是语法文档吧，但是写的很烂，很多甚至都没有一个完整的例子，而且里面有一些html内容上的小错误，包括你打开其中的index.html然后按F12调出控制台会发现有错误，这里是由于这个文件夹内缺少了相应App Framework的js和css文件，大家可以到build文件夹中复制appframework.js、appframework.ui.js、af.ui.css和icons.css放到documentation文件夹下，就可以看到完整版的文档了，我不确定当你看到这篇文章时是否还会有这个问题，我已经打算上github提交改正了，至少目前2.1.0版本有这个问题。

• 其余的文件夹和文件就是根目录下index.html所引用的内容了，基本组成了一个官方的API文档了，具体大家可以多看看各项内容，就不多说了。