混合式框架-AgileLite

Agile Lite是一个HTML5移动前端框架，支持jQuery和Zepto双引擎，并且提供与UI无关的独立框架，内置了Flat UI样式和Ratchet样式，同时也支持单页模式和多页模式开发。对于目前比较流行的微信内置浏览器APP，Agile Lite可以轻松的使用不同模式来开发。
下面就来介绍基于Agile Lite的微信webapp的特点，了解使用Agile Lite可以适应哪些场景。


特点一：丰富的UI组件
Agile Lite设计了众多的UI组件，包括一些基本的组件，如：按钮、颜色、字体图、表单、列表、详情等页面，也对一些特殊的控件和性能效率的优化提供的组件，比如：slider滑动组件、sliderPage滑动页、下拉上拉刷新组件、懒人加载组件、滑动删除组件、动态编辑列表组件以及日历组件等。组件的设计符合移动端的操作习惯和风格，并完全遵循HTML5的规范。


特点二：无关UI的独立扩展
Agile Lite的基础UI仅仅包含一个layout的CSS样式表，再此框架内的所有具有独立UI特性的样式都可以加入到Agile Lite中，比如，我们在源码中内置的Recthet样式完全可以在Agile Lite中使用。
所以，对于开发者来说扩展自己的UI是非常方便的，不受限于现有样式


特点三：jQuery和Zepto双引擎支持
无论是jQuery还是Zepto都有各自的优劣势，给很多开发者带来了选择的困扰。Agile Lite对两者都做了很好的适配，无论使用哪种引擎都可以顺利完成Agile Lite的逻辑操作，不同页面可以使用不同的引擎。
所以，对于开发者来说，如果使用了特定引擎的第三方插件都可以很好的融合进来。


特点四：完整的控制器逻辑操作
Agile Lite的所有组件切换都是通过控制器来完成的，控制器的写法支持标签属性调用也支持JS方法触发，控制器也可以设置参数给组件调用，比如：section页面、Modal页面、tab页、滑动页等的切换，都可以很方便的使用控制器实现。而且所有控制器都是可以扩展的，对于新的控制需求可以通过对控制器的扩展做到。


特点五：完全事件驱动的架构
从Agile Lite启动，到各个组件的创建、显示、隐藏、销毁等生命周期都有相应的事件触发，所有业务逻辑均在事件内完成，并且这些事件如果与宿主容器的原生事件绑定，就可以完成跟原生程序完全一样的生命周期交互逻辑，更符合app的效果。比如微信的ready事件和close关闭页面函数都可以绑定到Agile Lite中。


特点六：单页模式和多页模式共存
Agile Lite的开发模式既支持单页模式也支持多页模式，原则上单页模式适合单窗口宿主容器（如：PhoneGap等），多页模式适合多窗口宿主容器（如ExMobi等）。但是，在微信中却很特殊，对于办公类APP一般使用单页模式，可以使页面DOM结构得到最大限度的重用，以及最方便的页面交互（无须跨页操作），而对于营销类的APP，多数页面需要被转发传播，具有相对的独立性，可以使用多页模式。


特点七：微信JS SDK无缝集成
微信本身提供了丰富的JS SDK，可以帮助开发者在应用中使用一些本地能力以及针对微信内操作的一些事件监听以实现更复杂的逻辑。
Agile Lite对微信的JS SDK实现了config的鉴权，简单配置即可实现JS SDK的无缝调用，并支持微信支付的快速实现，帮助开发者更快更灵活的使用微信的JS SDK。


最后还是要韶一韶Agile Lite的短板。Agile Lite在架构之初是为具有宿主容器的框架而设计的（比如PhoneGap、ExMobi等），所以，业务逻辑更偏向于原生APP，所以对于很多基于浏览器这类单窗口的营销页面和游戏是不适合的，因为单页模式中仅含有一个页面，也就是一个URL地址，对于页面分享和转发有一定的局限，而采用多页模式虽然可以解决此问题，但是单页模式的很多特点就丧失了。另外，Agile Lite的多页模式也更适合在ExMobi这类可以支持多窗口打开的宿主容器中，多页与多窗口匹配才能发挥更到的效应。

好了，说了这么多，该是到体验的时候了，下面奉上几个Agile Lite的示例，以供参考。

     

             Agile Lite 示例                                         EDN Lite版本（discuz论坛）

     

               商城微店类示例                                        Agile Lite微信JS SDK

官方地址：http://www.agilelite.net/index.html