jqMobi（App Framework）入門學習（一）

標籤：app framework   jqmobi   移動跨平台架構   javascript架構   

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行動裝置 App公司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文檔了，具體大家可以多看看各項內容，就不多說了。

jqMobi（App Framework）入門學習（一）