继续上一篇接着开发路由控制器
还记得上上篇的类接口不

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

从0开发一个大玩具（八）

从0开发一个大玩具（八）

路由控制器具体实现