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的命名都须要进行有效管理；而多页模式因为打开多个页面，使得不一样页面间的交互比单页模式稍微复杂一些。因此，一般多页模式和单页模式按比例组合使用是很是有必要的。相对独立的页面可使用多页模式，有较多交互的页面采用单页模式。