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

2022-09-02 20:24:08 字數 1676 閱讀 1002

新公司接手的乙個專案是用agile lite框架搭建的,說實話,之前並沒有聽說過這個框架.不過前端框架這麼多,也只能慢慢的學習了.不過這個框架好像知道的人確實很少.網上很少看到到相關的介紹,官方的介紹也比較少.所以,自己寫了這個隨筆,記錄下這個框架的知識和工作專案中所用到的點.自己的乙個總結和以後需要的時候的乙個回顧.

agile lite是由烽火星空出品的,是乙個html5移動應用開發框架,支援jquery和zepto二選一,結合事件驅動模式提供控制器與元件的深度互動.基於模板技術提供mvp模式的資料注入,與元件結合,自動化初始元件,讓元件自帶執行.提供無關ui的可擴充套件架構,具有獨立ui結構的樣式都可以agile lite中使用.

third目錄下的檔案agile lite本身有嚴格的頁面結構.使用agile lite框架,基本模板如下:

agile lite

a.launch(

});

在原生開發的移動應用中,不同的元件稱為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之下,並且各自可以顯示需要的內容.

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

單頁模式就是在乙個html5移動應用中只包含乙個html頁面,不同的檢視的顯示實際上是乙個頁面中採用動態顯隱來實現的,不同的檢視都是乙個html片段,而不是完整的html頁面.

多頁模式相對於單頁模式,應用中的每乙個頁面都是乙個獨立的html頁面,而不是html片段.

傳統的寫法,多頁模式的話,每個頁面都要重複載入一些資料,頁面重新整理,很引響使用者體驗.所以需要採用更高效的方式將通用的資料快取,提高每個頁面的載入速度.

使用移動應用平台exmobi開發即可使用多頁模式進行移動應用的開發。

開發建議

單頁模式和多頁模式的選擇並不是隨意,一般當開發框架支援資料的快取方能使用多頁模式,否則建議使用單頁模式,而且通常支援多頁模式的框架,對單頁模式也會有較好的支援。

比如:phonegap是乙個純html5框架,更多能力封裝為js外掛程式,所以適用於單頁模式開發;而exmobi是乙個具有清晰介面結構的移動應用開發框架,除了html5也能採用其他方式展示介面,所以適用於多頁模式開發,當然,如果有特殊需要,單頁模式也是可以支援。

實際上不管是單頁模式還是多頁模式都各有利弊:

比如單頁模式會使乙個介面不斷載入新的元素而導致介面邏輯複雜和頁面膨脹,包括html、js和css的命名都需要進行有效管理;

而多頁模式由於開啟多個頁面,使得不同頁面間的互動比單頁模式稍微複雜一些。

所以,通常多頁模式和單頁模式按比例組合使用是非常有必要的。相對獨立的頁面可以使用多頁模式,有較多互動的頁面採用單頁模式。

移動前端開發

去掉輸入url控制項條 window.onload function script html,body body a,img mdn 手機網頁開發 mdn 在移動瀏覽器中使用viewport元標籤控制布局 移動前端開發和 web 前端開發的區別是什麼 移動前端端開發的入門理論 alloyteam移動...

前端移動框架

前端移動框架 1.sui mobile 基於 framework7 開發的ui庫 不考慮 url 優點 相容性好,能兼到 ios 6.0 和 android 4.0 缺點 sui mobile會和jquery衝突 5.mint ui 基於 vue.js 的移動端元件庫 待選 url 6.muse u...

建立移動應用移動應用 確保移動應用成功的16項指標

建立移動應用移動應用 精明的移動團隊知道,開發和發布移動應用程式只是邁向成功交付五星級移動應用程式的第一步。如果必須使您的應用程式成功 無論如何定義成功 提公升品牌,更多的資金,更多的參與度 則需要衡量正確的指標,並優化和迭代您的應用程式以實現目標。以下是一些值得關注的最重要指標 效能指標 1.應用...