agile lite-移動應用前端開發框架學習筆記

時間 2019-11-26

標籤 agile lite 移動應用前端開發框架學習筆記欄目無線简体版

原文原文鏈接

前言

新公司接手的一個項目是用agile lite框架搭建的,說實話,以前並無據說過這個框架.不過前端框架這麼多,也只能慢慢的學習了.不過這個框架好像知道的人確實不多.網上不多看到到相關的介紹,官方的介紹也比較少.因此,本身寫了這個隨筆,記錄下這個框架的知識和工做項目中所用到的點.本身的一個總結和之後須要的時候的一個回顧.
agile lite是由烽火星空出品的,是一個HTML5移動應用開發框架,支持jQuery和zepto二選一,結合事件驅動模式提供控制器與組件的深度交互.基於模板技術提供mvp模式的數據注入,與組件結合,自動化初始組件,讓組件自帶運行.提供無關UI的可擴展架構,具備獨立UI結構的樣式均可以agile lite中使用.javascript

Agile lite與微信

微信內置了瀏覽器內核,能夠對H5的頁面進行展現,而且開放了微信JS SDK能讓開發者調試微信客戶端已經集成的本地能力以及支付,轉發等業務能力.
agile lite能夠運行在任何支撐H5的宿主容器中,因此微信內置瀏覽器中可使用agile lite,可是agile lite爲微信JS SDK封裝了本地能力橋接類,能夠在agile lite中使用微信的能力.
微信僅支持單窗口,不能夠同時打開多個窗口,因此在微信開發中,通常建議使用單頁模式開發.
要調用微信內的JS SDK須要先通過驗證受權,agile lite中也對這部分能力作了集成,可以經過簡單的配置便可在微信中調用微信的JS SDK.css

目錄結構介紹

下載Agile Lite源碼以後，將其解壓縮到任意目錄便可看到2個目錄「agile」、「third」，agile是框架的核心，third是Agile Lite依賴的第三方庫，主要是jquery mobile、iscroll五、artTemplate。html

third目錄下的文件

jQuery mobile:是jQuery在移動端的一個插件,讓jQuery支持觸摸事件.
zepto:是一個輕量級的類jQuery框架,在agile lite中能夠替代jQuery使用.
IScroll5:是一個移動端頁面滾動的解決方案,agile lite裏面用到的是V5版本,在agile lite裏面封裝好了接口.
artTemplate:是一個經典的JS模板引擎,能夠將JSON數據動態注入到一個模板文件中.
UI框架:third目錄下內置了烽火出品的seedsUI和FlatUI以及熱門的第三方UIratchet和WeUI.
特別注意:agile lite中jQuery和zepto只能2選一,UI框架也只能使用一種.混用會出現不可預知的兼容性問題.

基本模板

agile lite自己有嚴格的頁面結構.使用agile lite框架,基本模板以下:前端

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Agile Lite</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="assets/app/css/app.css">
</head>
<body>
<h1>Hello World</h1>

<!-- third -->
<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
<script src="assets/third/iscroll/iscroll-probe.js"></script>
<script src="assets/third/arttemplate/template-native.js"></script>
<!-- agile -->
<script type="text/javascript" src="assets/agile/js/agile.js"></script>
<!-- app -->
<script type="text/javascript" src="assets/app/js/app.js"></script>

</body>
</html>

在js中必需要實現A.launch方法來期待agile lite框架.好比app.js :java

A.launch({
    readyEvent : 'ready',//觸發ready的事件，在ExMobi中爲plusready
    backEvent : 'backmonitor',//觸發返回按鍵的事件，在ExMobi中爲backmonitor
    crossDomainHandler : function(opts){
        $util.server(opts);//設置跨域
    }
});

agile lite的頁面結構

在原生開發的移動應用中,不一樣的組件稱爲view,不一樣的view組成一個頁面.在HTML5中,一個完整的HTML標籤就是一個頁面.
在agile lite中,弱化了HTML的概念,把HTML當成一個容器,body中顯示的主體內容纔是頁面,一個HTML容器能夠存放1個或者多個頁面,每一個頁面放置於section中.而一個頁面section必須有主體內容article,也能夠有頭部header,尾部footer,一些別的組件(view),能夠在section裏也能夠在article裏.
agile lite的基本結構就是以section爲單個頁面的容器,頁面中顯示的標題導航header和主體內容article,footer都位於section之下,而且各自能夠顯示須要的內容.jquery

開發模式

採用HTML5進行移動應用開發,開發模式很重要,並且開發模式的選中和承載HTML5的框架有關.移動應用開發最多見的兩種模式爲單頁模式和多頁模式.web

單頁模式

單頁模式就是在一個HTML5移動應用中只包含一個HTML頁面,不一樣的視圖的顯示其實是一個頁面中採用動態顯隱來實現的,不一樣的視圖都是一個HTML片斷,而不是完整的HTML頁面.跨域

在單頁模式中,主頁面是能夠獨立加載,更新和替換的一些可視元素的組合.經過這種方式,能夠不洗在每次用戶操做後從新加載整個頁面.在任什麼時候候,都只顯示與應用程序當前階段相關的可視元素和內容.其餘內容都被隱藏,但只要應用流中須要,就會顯示出來.瀏覽器

多頁模式

多頁模式相對於單頁模式,應用中的每個頁面都是一個獨立的HTML頁面,而不是HTML片斷.
傳統的寫法,多頁模式的話,每一個頁面都要重複加載一些數據,頁面刷新,很引響用戶體驗.因此須要採用更高效的方式將通用的數據緩存,提升每一個頁面的加載速度.
使用移動應用平臺ExMobi開發便可使用多頁模式進行移動應用的開發。緩存

開發建議

單頁模式和多頁模式的選擇並非隨意，通常當開發框架支持數據的緩存方能使用多頁模式，不然建議使用單頁模式，並且一般支持多頁模式的框架，對單頁模式也會有較好的支持。好比：PhoneGap是一個純HTML5框架，更多能力封裝爲JS插件，因此適用於單頁模式開發；而ExMobi是一個具備清晰界面結構的移動應用開發框架，除了HTML5也能採用其餘方式展現界面，因此適用於多頁模式開發，固然，若是有特殊須要，單頁模式也是能夠支持。實際上不論是單頁模式仍是多頁模式都各有利弊：好比單頁模式會使一個界面不斷加載新的元素而致使界面邏輯複雜和頁面膨脹，包括HTML、JS和CSS的命名都須要進行有效管理；而多頁模式因爲打開多個頁面，使得不一樣頁面間的交互比單頁模式稍微複雜一些。因此，一般多頁模式和單頁模式按比例組合使用是很是有必要的。相對獨立的頁面可使用多頁模式，有較多交互的頁面採用單頁模式。