简述
一个小型的SPA框架.无依赖第三方的小型路由，搭配webpack作为构建工具,主要利用webpack的code spilt及异步加载功能。
路由
高级浏览器使用H5 API,低级浏览器使用hash
html5Mode:
www.example.com/page1
www.example.com/page2
hashMode:
www.example.com/#/page1
www.example.com/#/page2Router所管理的页面生命周期
一共有5个阶段:
- beforeEnter
- pageInit
- viewInit
- viewDestory
- beforeLeave
路由配置
const Router = new Route();
Router
.addRoute({
path: 'a',
viewBox: '', // 容器锚点
template: '', // 页面模板
animate: 'slideInRight', //转场动画
pageInit() { // 异步加载ctrl,同时将ctrl挂载到route
const Controller = require('modules/path1/controller');
Router.registerCtrl('path1', new Controller(this.viewBox));
},
beforeEnter() {
},
beforeLeave() {
}
})
.addRoute({
path: 'b',
viewBox: '',
template: '',
animate: 'slideInRight', //转场动画
pageInit() {
const Controller = require('modules/path2/controller');
Router.registerCtrl('path2', new Controller(this.viewBox));
},
beforeEnter() {
},
beforeLeave() {
}
})页面逻辑
export default class PageModel {
constructor(container) {
//页面容器,获取dom通过这个容器root DOM来获取
this.container = document.querySelector(container);
}
setDomMap() {
let barDom = this.container.querySelector('.barDom');
}
viewInit() {
}
viewDestory() {
}
init() {
this.setDomMap();
this.viewInit();
}
}转场动画
slideInRight
slideInLeft
fadeIn
fadeOut
zoomIn
zoomOut使用方法
npm install
npm run dev
浏览器中打开localhost:3000/pages/register/