Agile Lite 是一个HTML5移动应用开发框架,提供基于事件驱动和数据注入的MVP模式以及无关UI的可扩展框架结构。

其特点是:

(一)AL是基于HTML5特性设计的移动前端框架。

(二)AL支持jQuery和zepto双引擎,并结合事件驱动模式提供控制器与组件的深度交互。

(三)AL基于模板技术提供MVP模式的数据注入,并与组件结合,自动初始化组件,确保组件的自动运行。

(四)AL提供无关UI的可扩展架构,具有独立UI结构的样式均可在AL中使用,而且控制器和组件均可灵活扩展。

所以,使用Agile Lite框架开发的webapp具有比较明显的代码风格。

Agile Lite (当前版本 v3.2.1 beta)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容,看看哪种方式适合你的需求吧。

Agile Lite 源码

包含Agile Lite完整的JS和CSS文件,以及依赖的一些第三方的资源库,如:jquery、iscroll5、arttemplate等。

下载 Agile Lite

Agile Lite示例代码

此示例代码中仅包含Agile Lite的静态代码,需要在ExMobi、PhoneGap或者微信中使用请自行改动(比如放到web容器中)。

单页 Agile Lite

ExMobi是一个移动应用平台,既可以使用原生封装的UIXML组件,也可以使用HTML5,并且可以支持对原生组件的扩展。[了解ExMobi]

Agile Lite可以运行在任何支持H5的宿主容器中,所以,在ExMobi中可以使用Agile Lite,但是二者之间没有必然的联系。但是Agile Lite为ExMobi封装了本地能力桥接类,可以在Agile Lite中很方便的使用ExMobi的能力。

由于ExMobi中支持多窗口打开页面,所以使用Agile Lite时可以适当结合多页和单页模式进行展示。

由于ExMobi中支持很多原生的能力,包括大部分的本地能力(拍照、摄像、定位等)、业务能力(推送、文档预览、各类支付、地图、语音识别、语音合成、名片识别等等),在Agile Lite中可以很方便的进行调用。

下载Agile Lite在ExMobi中的示例

微信内置了浏览器内核,可以对H5的页面进行展示,并且开放了微信JS SDK能够让开发者调用微信客户端已经集成的本地能力以及支付、转发等业务能力。

Agile Lite可以运行在任何支持H5的宿主容器中,所以,在微信内置浏览器中可以使用Agile Lite,但是二者之间没有必然的联系。但是Agile Lite为微信JS SDK封装了本地能力桥接类,可以在Agile Lite中使用微信的能力。

微信仅支持单窗口,不可以同时打开多个窗口,所以一般建议微信中使用单页模式开发。

要调用微信内的JS SDK需要先经过验证授权,Agile Lite中也对这部分能力做了集成,能够通过简单的配置即可在微信中调用微信的JS SDK。

下载Agile Lite在微信中的示例

Agile Lite是一个以结构为基础的前端框架。糅合了不同的框架,并在基本业务逻辑封装了简单的JS进行调用和处理。

目录结构

下载Agile Lite源码之后,将其解压缩到任意目录即可看到2个目录“agile”、“third”,agile是框架的核心,third是Agile Lite依赖的第三方库,主要是jquery mobile、iscroll5、artTemplate。以下是agile的目录结构:


agile/
├── css/
│   └── agile.layout.css
├── js/
│   └── agile.js
└── img/
     └── some img

                            

third目录下的文件:

jquery mobile是jquery在移动端的一个插件,让jquery支持触摸事件。

Zepto是一个轻量级的类jquery框架,在Agile Lite中可以代替jquery使用。

IScroll5是一个移动端页面滚动的解决方案,这里用到的是v5版本,在Agile Lite里面已经封装好接口,一般情况下不需要直接调用,详细了解请访问其在github的位置。

arttemplate是一个经典的JS模板引擎,可以将JSON数据动态注入到一个模板文件中,详细了解请访问其在github的位置。

需要特别注意的是,Agile Lite是一个支持jQuery和Zepto双引擎,并且是与UI无关的框架。所以jQuery和Zepto只能任选其一而不可混用,UI框架也是仅能使用其中一种UI风格。如果混用,将会出现不可预知的兼容性问题,请开发者慎重使用。

使用的UI框架

Agile Lite是无关UI的一个框架,内置了烽火出品的FlatUI以及热门第三方UIRatchetWeUI等,原则上任意有独立CSS的UI组件都可以在Agile Lite中使用。

内置的UI均放置于third目录下。

效果如下(请使用chome浏览器访问本页或扫描二维码在真机访问):

Agile Lite本身有严格的页面结构,下面我们就来一起了解Agile Lite的结构。

基本模板

使用Agile Lite框架,最基本要引用的CSS和JavaScript以及HTML页面如下(所有JS和CSS均使用相对地址):


<!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


A.launch({
    readyEvent : 'ready',//触发ready的事件,在ExMobi中为plusready
    backEvent : 'backmonitor',//触发返回按键的事件,在ExMobi中为backmonitor
    crossDomainHandler : function(opts){
        $util.server(opts);//设置跨域
    }
});
                

由于此基本模板没有涉及任何结构,那么接下来就让我们一起来认识Agile的基本结构。

Agile Lite的页面结构

在原生开发的移动应用中,不同的组件称为View,不同的View才组成一个页面。在HTML5中,一个完整的HTML标签就是一个页面,想要达到原生效果,需要将HTML的元素合理利用。

在Agile Lite中,弱化HTML的概念,把HTML当成一个容器,BODY中显示的主体内容才是页面,一个HTML容器中可以存放1个或者多个页面,每个页面放置于Section中。而一个页面(Section)中必有主体内容(Article),也有可能包含头部内容、底部内容,甚至一些菜单等。也就是说不同的组件(View)则可以放置于Section中也可以放置于Article中。

所以,以我们通常看到的一个移动应用的界面中包含了顶部Title和主体内容的页面代码如下:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webapp</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/third/ratchet/css/ratchet.min.css">
<link rel="stylesheet" href="assets/app/css/app.css">
</head>
<body>
<div id="section_container">
<section id="index_section" data-role="section" class="active" data-transition="slideDown">
<header class="bar bar-nav">
<a data-toggle="close" href="#"><font class="icon icon-left-nav"></font><font class="icon">返回</font></a>
<h1 class="title">首页</h1>
</header>


<article id="index_article" data-role="article" class="active" data-scroll="verticle">
<div class="scroller">
<h1>欢迎使用Agile Lite</h1>
</div>
</article>
</section>

</div>
<!--- 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>
                

这里可以看到Agile Lite的基本结构是以Section为单个页面的容器,页面中显示的标题导航header和主体内容Article都位于Section之下,并且各自可以显示需要的内容。

也就是如下图的一个结构:

采用HTML5进行移动应用开发,开发模式很重要,而且开发模式的选择与承载HTML5的框架有关。移动应用开发最常见的两种模式为单页模式和多页模式。

单页模式

单页模式(Single-page Application)即在一个HTML5移动应用中只包含一个HTML页面,而不同视图的显示实际是在一个页面中采用动态显隐实现,而其中最重要的技术的就是Ajax,不同视图的获取都是通过Ajax从远程服务器中获取。

也就是说,不同的视图都是一个HTML片段,而不是完整的HTML页面。

在 SPA 模式中,主页面(完整HTML页面)是可以独立加载、更新和替换的一些可视元素的组合(HTML片段)。通过这种方式,可以不必在每次用户操作后重新加载整个页面。在任何时候,都只显示与应用程序当前阶段相关的可视元素和内容。其他所有内容均被隐藏;但只要应用程序流程中需要用到它,它就会显示出来。

如果一个移动app使用Agile Lite开发单页模式的应用,则其页面结构应该是:


Application
    └── WebView
        └──HTML
            ├── Section
            ├── Section
            └── Section
                

在移动应用开发框架PhoneGap中推荐采用的模式就是单页模式。

多页模式

多页模式(Multi-page Application)是相对于单页模式而言,应用中的每一个页面都是一个独立HTML页面,而不是HTML片段。

如果是采用传统的WEB思维,在移动应用中的采用多页模式,则每个页面可能都会重复加载一些数据(JS、CSS、部分HTML代码等),并且用户的前进后退操作都有可能会造成页面的刷新,降低用户体验。

所以,需要采用更加高效的方式将通用的数据缓存,提高每个页面加载速度。

如果一个移动app使用Agile Lite开发多页模式的应用,则其页面结构应该是:


Application
    ├── WebView
    │        └──HTML
    │            ├── Section
    │            ├── Section
    │            └── Section
    └── WebView
            └──HTML
                ├── Section
                ├── Section
                └── Section
                

使用移动应用平台ExMobi开发即可使用多页模式进行移动应用的开发。

开发建议

单页模式和多页模式的选择并不是随意,一般当开发框架支持数据的缓存方能使用多页模式,否则建议使用单页模式,而且通常支持多页模式的框架,对单页模式也会有较好的支持。

比如:PhoneGap是一个纯HTML5框架,更多能力封装为JS插件,所以适用于单页模式开发;而ExMobi是一个具有清晰界面结构的移动应用开发框架,除了HTML5也能采用其他方式展示界面,所以适用于多页模式开发,当然,如果有特殊需要,单页模式也是可以支持。

实际上不管是单页模式还是多页模式都各有利弊:

比如单页模式会使一个界面不断加载新的元素而导致界面逻辑复杂和页面膨胀,包括HTML、JS和CSS的命名都需要进行有效管理;

而多页模式由于打开多个页面,使得不同页面间的交互比单页模式稍微复杂一些。

所以,通常多页模式和单页模式按比例组合使用是非常有必要的。相对独立的页面可以使用多页模式,有较多交互的页面采用单页模式。