移动端MVP
开发框架,使用etpl作为模版引擎,结合页面转场与路由管理,提供完整的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();
具体请参考使用指南
加载路由配置信息
- route
{Object|Array.<Object>}
路由配置信息,具体参考doc/route
启动应用
- ele
{HTMLElement}
容器元素 - options
{Object=}
全局配置信息,具体参考doc/config
添加在加载页面前执行的过滤器
- url
{string|RegExp=}
filter匹配的url或者url正则表达式,如果不设置则filter对所有url都生效 - fn
Function(route, next, jump)
filter,支持异步操作,有四个参数:- route
{Object}
路由信息,包括页面URLpath
与查询条件query
等 - next
{Function}
执行下一个filter - jump
{Function}
跳过后续的filter
- route
最常见的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();
}
});
删除缓存的Action
- path
{string}
页面路径
绑定事件
- name
{string}
事件名称,具体请参考事件说明 - fn
{Function}
事件处理函数
加载页面前事件,有两个参数,after
待加载页面信息 与 before
当前页面信息
- after
{Object}
待加载页面信息 - before
{Object}
当前页面信息
转场动画开始前事件,参数同beforeload
页面加载完成事件,参数同beforeload
页面加载失败事件,参数同beforeload