继续上一篇接着开发路由控制器
还记得上上篇的类接口不
interface RouterInterface {
push: (RouterEntryInterface) => boolean;
back: () => boolean;
replace: (RouterEntryInterface) => boolean;
getHistoryList: () => RouterEntryInterface[];
clearHistory: () => boolean;
canBack: () => number;
getTargetUrl: () => string;
getTargetPageIntance: () => any;
}
路由控制器具体实现
开始创建类
import BaseController from "./base.controller";
import RouterConfig from '../conf/routerConfig.class';
class RouterController extends BaseController implements RouterInterface {
constructor(el: string) {}
}
！！！这里解释一下从构造器传入的el是什么？
路由控制器使用来控制页面的，所有的页面控制器被实例化的过程都是在路由控制器中完成的，所以在控制器中我们需要知道展示出来的页面需要被填充到哪个div中，传入的el也就是这个div的选择器，虽然目前路由控制器还不支持子路由，不过先留出一个接口来让他可以根据选择器来渲染也是好的，这样如果后期需要支持子路由的话，只需要修改配置文件和路由器中的页面渲染逻辑就可以了，不至于需要把所有的页面控制器都修改一遍
1.创建所需的成员变量
// 路由控制器实例
private static instance: RouterInterface;
// 路由历史存放位置
private historyList: RouterHistoryInterface[] = [];
// 当前页面控制器实例
private targetPageInstance: any = {};
// 当前页面的参数对象
private targetPage: RouterHistoryInterface;
// 路由根节点
private readonly RootNode: string;
2.实现initpage方法
因为replace 和push只是存不存历史的区别，所以抽离一个initpage的方法
private initPage(option: RouterHistoryInterface): boolean {
try {
let query = RouterController.getRouterEntryQuery(option);
this.targetPage = option;
if (this.targetPageInstance.hasOwnProperty('destory')) {
this.targetPageInstance.destory();
}
let page = RouterConfig.getControll(RouterController.getRouterEntryName(option));
this.targetPageInstance = new page({
el: this.RootNode,
...query
});
return true;
} catch (e) {
console.warn(e);
return false;
}
}
3.增加 getRouterEntryQuery和getRouterEntryName静态方法用来获取数据中的字段
private static getRouterEntryName(option: RouterEntryInterface): string {
return option.name;
}
private static getRouterEntryQuery(option: RouterEntryInterface): object {
return option.query || {};
}
coding到这里又想起一个问题，这个路由控制器是需要在各个控制器中都可以访问的，这。。。
！！！单例模式
单例模式，属于创建类型的一种常用的软件设计模式。通过单例模式的方法创建的类在当前进程中只有一个实例（根据需要，也有可能一个线程中属于单例）
emm~
所以需要实现一个getInstance的方法
- 实现getInstance方法获取控制器实例和激活控制器
public static getInstance(el?: string): RouterInterface {
if (!this.instance) {
this.instance = new RouterController(el)
}
return this.instance;
}
继续coding
5.增加验证逻辑 checkHistoryIndex方法
private checkHistoryIndex(): void {
let index = 0;
this.historyList.forEach((v, k) => {
if (v.uuid == this.targetPage.uuid) {
index = k;
}
});
if (index != this.historyList.length - 1) {
this.historyList.splice(index + 1, this.historyList.length - index - 1);
}
}
这个方法是用来做什么呢，考虑场景
因为路由是可以回退的，如果直接向历史中push的话会出现问题
比如 现有历史
[1,2,3,4,5,6]
那么6就是当前页面
从6回退到3
然后再通过某个按钮跳转到页面7
如果不处理历史记录的话就变成了
[1,2,3,4,5,6,7]
从7再回退呢，就回到了6，这明显是错误的，从7回退应该回到3
所以就需要把3之后的历史清除掉，这个方法就是做这个用处的
6.增加uuid作为history标识
private addUuidToOption(option: RouterEntryInterface): RouterHistoryInterface {
return {
...option,
uuid: this.utils.uuid()
}
}
因为历史中的name是会重复的这个前面提到过，所以生成一个随机字符串来作为历史标识
至于uuid重复的问题，不要考虑啦，一个路由历史能存多少条呀，对不对
7.实现getTargetUrl方法
public getTargetUrl(): string {
return RouterController.getRouterEntryName(this.targetPage);
}
8.实现getTargetPageIntance方法
public getTargetPageIntance(): any {
return this.targetPageInstance;
}
9.实现push方法
public push(option?: RouterEntryInterface): boolean {
this.checkHistoryIndex();
let op = this.addUuidToOption(option);
this.historyList.push(op);
this.initPage(op);
return true;
}
以后的页面跳转就主要靠它啦
10.实现canBack方法
public canBack(): number {
let index = 0;
this.historyList.forEach((v, k) => {
if (v.uuid == this.targetPage.uuid) {
index = k;
}
});
return index - 1;
}
- 实现back方法
public back(): boolean {
let index = this.canBack();
if (index == -1) {
return false;
}
this.initPage(this.historyList[index]);
return true;
}
12.实现replace方法
public replace(option: RouterEntryInterface): boolean {
this.checkHistoryIndex();
let op = this.addUuidToOption(option);
this.initPage(op);
return true;
}
13.实现getHistroyList方法
public getHistoryList(): RouterHistoryInterface[] {
return this.historyList
}
14.实现clearHistory方法
public clearHistory(): boolean {
this.historyList.forEach((v, k) => {
if (v.uuid == this.targetPage.uuid) {
this.historyList = [v];
}
});
return true;
}
至此路由控制器就暂时完成了
以后可能会遇到控制器还没有完善的地方，一点一点补全吧
关于子路由控制器的问题，因为现在路由控制器采取了单例模式，也就是说不能实例化多次了，可能会考虑将子路由控制器继承子顶级路由控制器，然后子路由不采取单例模式就可以解决这一问题了，不过现阶段还没有用到子路由所以先不写啦
接下来就开始实现具体的功能模块咯
此致
敬礼~
小旋风
我建了一个前端微信交流群，欢迎大家加入，qq中转群号：1076484243
网友评论