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文档了,具体大家可以多看看各项内容,就不多说了。