Question

移动端MVP开发框架，使用etpl作为模版引擎，结合页面转场与路由管理，提供完整的SPA解决方案。

Installation

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

$ edp mobile init spa

或者通过 edp 引入模块：

$ edp import saber-firework

Usage

var app = require('saber-firework');

// 加载index配置
app.load({
    path: '/index',
    action: require('./index')
});

// 启动App
app.start();

具体请参考使用指南

API

• Methods
• Events
• Classes

Methods

load(route)

加载路由配置信息

• route {Object|Array.<Object>} 路由配置信息，具体参考doc/route

start(ele[, options])

启动应用

• ele {HTMLElement} 容器元素
• options {Object=} 全局配置信息，具体参考doc/config

addFilter(url, fn)

添加在加载页面前执行的过滤器

• url {string|RegExp=} filter匹配的url或者url正则表达式，如果不设置则filter对所有url都生效
• fn Function(route, next, jump) filter，支持异步操作，有四个参数：
  • route {Object} 路由信息，包括页面URLpath与查询条件query等
  • next {Function} 执行下一个filter
  • jump {Function} 跳过后续的filter

最常见的filter有日志统计，权限验证等，例如：

// 对所有`/admin/`路径下的页面添加登录验证
firework.addFilter(/^\/admin\//, function (route, next, jump) {
    if (!isLogin) {
        // 没登录就乖乖去登录
        // 通过直接修改路由信息中的`path`来改变实际加载的页面
        // 同时添加名为`form`的`query`参数，用于登录完成后跳转回之前的页面
        route.query = { from: route.path };
        route.path = '/login';
        // 直接跳过后续的filter
        jump();
    }
    else {
        // 已经登录了
        // 就好好继续执行下一个filter吧
        next();
    }
});

delCachedAction(path)

删除缓存的Action

• path {string} 页面路径

on(name, fn)

绑定事件

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

Events

beforeload

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

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

beforetransition

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

afterload

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

error

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

Classes

• Action对象，页面行为控制
• View对象，页面视图管理
• Model对象，页面数据管理