前言
新公司接手的一个项目是用agile lite框架搭建的,说实话,之前并没有听说过这个框架.不过前端框架这么多,也只能慢慢的学习了.不过这个框架好像知道的人确实很少.网上很少看到到相关的介绍,官方的介绍也比较少.所以,自己写了这个随笔,记录下这个框架的知识和工作项目中所用到的点.自己的一个总结和以后需要的时候的一个回顾.
agile lite是由烽火星空出品的,是一个HTML5移动应用开发框架,支持jQuery和zepto二选一,结合事件驱动模式提供控制器与组件的深度交互.基于模板技术提供mvp模式的数据注入,与组件结合,自动化初始组件,让组件自带运行.提供无关UI的可扩展架构,具有独立UI结构的样式都可以agile lite中使用.
Agile lite与微信
微信内置了浏览器内核,可以对H5的页面进行展示,并且开放了微信JS SDK能让开发者调试微信客户端已经集成的本地能力以及支付,转发等业务能力.
agile lite可以运行在任何支撑H5的宿主容器中,所以微信内置浏览器中可以使用agile lite,但是agile lite为微信JS SDK封装了本地能力桥接类,可以在agile lite中使用微信的能力.
微信仅支持单窗口,不可以同时打开多个窗口,所以在微信开发中,一般建议使用单页模式开发.
要调用微信内的JS SDK需要先经过验证授权,agile lite中也对这部分能力做了集成,能够通过简单的配置即可在微信中调用微信的JS SDK.
目录结构介绍
下载Agile Lite源码之后，将其解压缩到任意目录即可看到2个目录“agile”、“third”，agile是框架的核心，third是Agile Lite依赖的第三方库，主要是jquery mobile、iscroll5、artTemplate。
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 :
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之下,并且各自可以显示需要的内容.
开发模式
采用HTML5进行移动应用开发,开发模式很重要,而且开发模式的选中和承载HTML5的框架有关.移动应用开发最常见的两种模式为单页模式和多页模式.
单页模式
单页模式就是在一个HTML5移动应用中只包含一个HTML页面,不同的视图的显示实际上是一个页面中采用动态显隐来实现的,不同的视图都是一个HTML片段,而不是完整的HTML页面.
在单页模式中,主页面是可以独立加载,更新和替换的一些可视元素的组合.通过这种方式,可以不洗在每次用户操作后重新加载整个页面.在任何时候,都只显示与应用程序当前阶段相关的可视元素和内容.其他内容都被隐藏,但只要应用流中需要,就会显示出来.
多页模式
多页模式相对于单页模式,应用中的每一个页面都是一个独立的HTML页面,而不是HTML片段.
传统的写法,多页模式的话,每个页面都要重复加载一些数据,页面刷新,很引响用户体验.所以需要采用更高效的方式将通用的数据缓存,提高每个页面的加载速度.
使用移动应用平台ExMobi开发即可使用多页模式进行移动应用的开发。
开发建议
单页模式和多页模式的选择并不是随意，一般当开发框架支持数据的缓存方能使用多页模式，否则建议使用单页模式，而且通常支持多页模式的框架，对单页模式也会有较好的支持。
比如：PhoneGap是一个纯HTML5框架，更多能力封装为JS插件，所以适用于单页模式开发；而ExMobi是一个具有清晰界面结构的移动应用开发框架，除了HTML5也能采用其他方式展示界面，所以适用于多页模式开发，当然，如果有特殊需要，单页模式也是可以支持。
实际上不管是单页模式还是多页模式都各有利弊：
比如单页模式会使一个界面不断加载新的元素而导致界面逻辑复杂和页面膨胀，包括HTML、JS和CSS的命名都需要进行有效管理；
而多页模式由于打开多个页面，使得不同页面间的交互比单页模式稍微复杂一些。
所以，通常多页模式和单页模式按比例组合使用是非常有必要的。相对独立的页面可以使用多页模式，有较多交互的页面采用单页模式。