Bower version Build Status License EFE Mobile Team

移动端SPA开发框架,基于MVP架构,结合页面转场与路由管理,提供完整的SPA解决方案。

使用 edpx-mobile 初始化项目,引入相关模块

$ edp mobile init spa

或者通过 edp 引入模块:

$ edp import saber-firework

var app = require('saber-firework');
// 加载index配置
app.load({
 path: '/index',
 action: require('./index')
});
// 启动App
app.start();

更多内容请参考使用指南

从 2.0 开始,saber-firework 能支持同构的移动端项目了〜 只需要引入同构的插件就能让 saber-firework 作为同构项目的浏览器端运行环境来工作:

var app = require('saber-firework');
// 引入同构插件
require('saber-firework/extension/isomorphic');
// 欢迎进入同构的世界〜
...

• Methods
• Events

启动应用

• ele {HTMLElement} 容器元素
• options {Object=} 全局配置信息
  • path {string=} 默认路径,默认为 '/'
  • index {string=} index文件名称,默认为 '',如果设置为 'index' 则 '/' 与 '/index' 认为是相同路径
  • template {string|Array.<string>=} 公共模版字符串,预编译的template,主要用于在启动App时提前编译全局公用的 template,比如母版等,默认为空
  • templateConfig {Object=} 模版配置信息,具体请参考 etpl 配置参数
  • templateData {Object=} 全局模版数据
  • Presenter {Object=} 自定义 Presenter 基类
  • Model {Object=} 自定义 Model 基类
  • View {Object=} 自定义 View 基类
  • router {Object=} 路由器,默认为 hash 路由
  • timeout {number=} 页面加载超时时间,单位ms,超时后框架可以响应其它页面的切换请求,默认为 300
  • processor {Object=} 附加处理器,作用于特定时刻调整框架行为,具体请参考附加处理器说明
  • viewport {Object=} 转场相关配置,具体请参考 saber-viewprot 的全局配置参数说明,默认为{ transition: false } 关闭转场效果

saber-firework 由 saber-mm 提供 MVP 的实现,Presenter、View、Model 相关的配置与 API 请参考 saber-mm 的说明文档

加载路由配置信息

• route {Object|Array.<Object>} 路由配置信息
  • path {string} 请求路径
  • action {Object|string} Presenter 配置信息,如果是字符串则表示配置文件的加载地址,会在后续实际访问时进行异步加载
  • cached {boolean=} Presenter 缓存设置,缓存的页面在离开时不会被销毁,下次访问会跳过初始化渲染过程
  • transition {Object=} 转场参数,具体请参考 saber-viewprot 的全局配置参数说明

获取后端同步的数据,只针对同构的项目,关于同构的相关信息请参考 rebas

• name {string} 数据名称
• return {*} 数据内容

删除缓存的Action

• path {string} 页面路径

绑定事件

• name {string} 事件名称,具体请参考事件说明
• fn {Function} 事件处理函数

加载页面前事件,有两个参数,after待加载页面信息 与 before当前页面信息

• after {Object} 待加载页面信息
  • route {Object} 待加载页面的路由信息
    • path {string} 地址
    • query {Object} 查询条件
    • url {string} 完整 URL
  • action {Action} 待加载的 Presenter 对象
  • page {Page} 待加载的 Page 对象
• before {Object} 当前页面信息
  • route {Object} 当前页面的路由信息
    • path {string} 地址
    • query {Object} 查询条件
    • url {string} 完整 URL
  • action {Action} 当前的 Presenter 对象
  • page {Page} 当前的 Page 对象

转场动画开始前事件,参数同 beforeload

页面加载完成事件,参数同 beforeload

页面加载失败事件,参数同 beforeload