前端抽象化，打破框架枷锁:统一路由的设计

/**
 * @description: 路由携带数据
 * @return {*}
 */
export interface NavigationOptions {
  params?: Record<string, string>;
  query?: Record<string, string>;
  hash?: string;
}
/**
 * @description: 跳转类型
 * @return {*}
 */
export enum NavigationType {
    push = 'push',
    replace = 'replace',
    back = 'back',
    forward = 'forward',
}

/**
 * @description: 路由守卫，返回一个真正要跳转的路由
 * @return {*} 返回一个新的跳转路径，或者什么也不返回，按原计划跳转
 */
export interface RouteGuard {
    (context: NavigationContext): NavigationInstruction|void | Promise<NavigationInstruction|void>;
}

/**
 * @description: 路由进入前的钩子
 * @return {*}
 */
export interface RouterBefore {
    (context: NavigationContext): void | Promise<void>;
}

/**
 * @description: 路由离开前的钩子
 * @return {*}
 */
export interface RouterLeave {
    (context: NavigationContext): void | Promise<void>;
}


/**
 * @description: 路由上下文
 * @return {*}
 */
export class NavigationContext {
  constructor(
    public instruction: NavigationInstruction,
    public prevInstruction: NavigationInstruction|null,
    public nextInstruction: NavigationInstruction|null,
    public currentRoute: ResolvedRoute,
  ) {}
}

/**
 * @description: 路由指令
 * @return {*}
 */
export class NavigationInstruction {
  constructor(
    public type: NavigationType,
    public target: string,
    public options: NavigationOptions,
    public timestamp: number
  ) {}
}

/**
 * @description: 路由解析
 * @return {*}
 */
export class ResolvedRoute {
  constructor(
    public path: string,
    public component: any,
    public guards: RouteGuard[] = [],
    public enterHook: RouterBefore[] = [],
    public leaveHook: RouterLeave[] = [],
    public children: ResolvedRoute[] = [],
    public metadata: Map<string, any> = new Map()
  ) {}
}

import {
  NavigationContext,
  NavigationInstruction,
  NavigationOptions,
  NavigationType,
  ResolvedRoute,
} from "./router_domain";

/**
 * @description:导航器，使用有两种方式进行编程式路由导航
 * @return {*}
 */
export interface INavigator {
  push(target: string, options: NavigationOptions): Promise<void>;
  replace(target: string, options: NavigationOptions): Promise<void>;
  back(): Promise<void>;
  forward(): Promise<void>;
}

/**
 * @description: 路由解析器，用于解析路由实际对象
 * @return {*}
 */
export interface IRouteResolver {
  resolve(path: string): Promise<ResolvedRoute>;
}

/**
 * @description: 中间件逻辑，用于处理路由跳转前的随时可插拔处理
 * @return {*}
 */
export interface IMiddleware {
  process(context: NavigationContext, next: () => Promise<void>): Promise<void>;
}

/**
 * @design: 建议实现为单例模式
 * @description: 历史管理器，用于管理路由历史记录，用于可监控式路由路径
 * @return {*}
 */
export interface IHistoryManager {
  push(entry: NavigationInstruction): void;
  replace(entry: NavigationInstruction): void;
  back(): void;
  forward(): void;
  getAllHistory(): NavigationInstruction[];
  clear(): void;
}

/**
 * @description: 路由数据，用于存储全部路由信息
 * @return {*}
 */
export interface IRoute {
  routes: ResolvedRoute[];
  routeMap: Map<string, ResolvedRoute>;
  createRouteMap(): void;
  addRoute(route: ResolvedRoute): void;
}

import { IHistoryManager, IMiddleware } from "./router_core";
import { NavigationContext } from "./router_domain";

/**
 * @description: 管道设计，当前这个是阻塞式的管道设计，依次处理中间件
 * @return {*}
 */
export class NavigationPipeline {
  middlewares: IMiddleware[] = [];
  errorHandler?: (error: Error, context: NavigationContext) => void;

  async pipe(context: NavigationContext): Promise<void> {
    let index = 0;
    const next = async () => {
      if (index < this.middlewares.length) {
        const middleware = this.middlewares[index++];
        await middleware.process(context, next);
      }
    };
    await next();
  }
  addMiddleware(middleware: IMiddleware): void {
    this.middlewares.push(middleware);
  }
  onError(handler: (error: Error, context: NavigationContext) => void): void {
    this.errorHandler = handler;
  }
}

/**
 * @description: 路由守卫中间件
 * @return {*}
 */
export class GuardMiddleware implements IMiddleware {
  async process(
    context: NavigationContext,
    next: () => Promise<void>
  ): Promise<void> {
    const route = context.currentRoute;
    for (const guard of route.guards) {
      const result = await guard(context);
      //   若得到了新的跳转路径，则跳转到新的路径
      if (result) {
        context.instruction = result;
        break;
      }
    }
    await next();
  }
}

export class HistoryMiddleware implements IMiddleware {
  histroyManager: IHistoryManager;
  constructor(histroyManager: IHistoryManager) {
    this.histroyManager = histroyManager;
  }
  async process(
    context: NavigationContext,
    next: () => Promise<void>
  ): Promise<void> {
    const instruction = context.instruction;
    const type = instruction.type;
    this.histroyManager[type](instruction);
    next();
  }
}

import { INavigator, IRouteResolver, IHistoryManager, IRoute } from "./router_core"
import { NavigationPipeline } from "./router_pipeline"

export abstract class AbstractRouterAdapter {
    navigator: INavigator
    resolver: IRouteResolver
    history: IHistoryManager
    route:IRoute
    pipeline: NavigationPipeline
    initialize(route:IRoute,pipeline:NavigationPipeline): void{
        this.route = route
        this.pipeline = pipeline
        this.navigator = this.createNavigator()
        this.resolver = this.createResolver()
        this.history = this.createHistory()
    }
    abstract createNavigator(): INavigator
    abstract createResolver(): IRouteResolver
    abstract createHistory(): IHistoryManager
    abstract errorHandler():void
}