Apee-Router
Apee-Router 是一个简单且轻量级的 JavaScript 路由库，允许开发人员轻松处理他们的 Web 应用程序中的路由。
它提供了一种定义路由、设置默认路由和根据 URL 更改加载路由的方式。
项目地址
https://github.com/oyps/apee-router
使用方法
-
安装 Apee-Router
-
通过 npm
npm install apee-router -
通过
<script><!-- 未压缩版本 --> <script src="https://cdn.jsdelivr.net/npm/apee-router/dist/apee-router.js"></script> <!-- 压缩版本 --> <script src="https://cdn.jsdelivr.net/npm/apee-router/dist/apee-router.min.js"></script>
-
-
导入
ApeeRouter类如果您使用
<script>引入 Apee-Router ，则直接获得全局的 ApeeRouter 类。// TypeScript import ApeeRouter from 'apee-router' // JavaScript const ApeeRouter = require('apee-router').default -
创建 ApeeRouter 对象
使用
new关键字，创建一个对象。const router = new ApeeRouter() -
设置路由
-
通过
ApeeRouter类的构造函数设置路由new ApeeRouter({ /** 可选，默认路由 */ default: 'home', /** 可选，注册路由列表 */ routeSet: ['about', ['list', (route) => { }], 'share'] }) -
通过
set方法设置路由const router = new ApeeRouter() const routeEvent = (route) => { console.log(route.name) } // 单个路由 + 单个路由事件 router.set('home', routeEvent) // 单个路由 + 单个路由事件 router.set('home', [routeEvent, routeEvent]) // 多个路由 + 单个路由事件 router.set(['home', 'about'], routeEvent) // 多个路由 + 多个路由事件 router.set(['home', 'about'], [routeEvent, routeEvent])
-
-
启动路由
router.show() -
设置 CSS
[data-route] { display: none; } -
创建 HTML
<div data-route="home"></div> <div data-route="list"></div> <div data-route="share"></div> <div data-route="about"></div>您也可以在 VSCode 中新建 HTML 代码片段，输入 apr 即可快捷插入路由 DOM 。
"ApeeRouter": { "prefix": "apee-router", "body": "<div data-route=\"$1\">\n $2\n</div>\n", "description": "插入一个 ApeeRouter 路由 DOM" },
API 文档
-
constructor方法/** * 实例化路由管理模块 * @param options 配置选项 */ public constructor(options?: InitOption): void -
set方法/** * 设置路由 * @param routeName 路由名称，可通过数组传入多个 * @param routeEvent 路由事件，可通过数组传入多个 */ public set(routeName: RouteNameSetOption, routeEvent?: RouteEventSetOption): Route[] -
setDefaultRoute方法/** * 设置默认路由 * @param _default 默认路由选项 */ public setDefaultRoute(_default: DefaultRouteOption): void -
getRouteDom方法/** 获取所有路由 DOM */ public getRouteDom(): NodeListOf<HTMLElement> /** * 获取某个路由 DOM * @param routeName 路由名称 */ public getRouteDom(routeName: string): HTMLElement /** * 获取所有路由 DOM ，并排除某个路由 DOM * @param routeName 需要排除的路由名称 * @param exclude 是否开启该功能 */ public getRouteDom(routeName: string, exclude: boolean): NodeListOf<HTMLElement> -
loadRoute方法/** * 载入路由 * @param route 路由对象 * @param args 路由参数 */ public loadRoute(route: Route, args: string[]): void -
start方法/** 启动路由系统 */ public start(): void -
ApeeRouter.util工具类/** 工具类 */ public static util = { /** 显示元素 */ show(dom?: HTMLElement | HTMLElement[]) { if (!dom) return const doms = dom instanceof Node ? [dom] : dom doms.forEach(dom => dom.style.display = 'block') }, /** 隐藏 DOM */ hide(dom?: HTMLElement | HTMLElement[]) { if (!dom) return const doms = dom instanceof Node ? [dom] : dom doms.forEach(dom => dom.style.display = 'none') }, }
类型定义
/** 路由名称设置选项 */
type RouteNameSetOption = string | string[]
/** 路由事件设置选项 */
type RouteEventSetOption = RouteEvent | RouteEvent[]
/** 路由设置选项 */
type RouteSetOption = RouteNameSetOption | [RouteNameSetOption, RouteEventSetOption]
/** 路由事件 */
type RouteEvent = (route: Route) => void
type Route = {
/** 路由名称 */
name: string
/** 路由数据存储区 */
data: Record<string, any>,
/** 路由就绪状态 */
status: number,
/** 路由事件列表 */
event: RouteEvent[],
/** 路由目标 DOM */
dom: HTMLElement,
/** 路由参数 */
args: string[]
}
开发环境
-
打包项目
npm run build -
测试环境
npm run test
关于项目
- 作者：https://github.com/oyps
- 公众号：代码十级（微信搜索，点点关注哦）
- 博客： https://apee.top
源代码解析
这是一个 TypeScript 编写的路由管理模块，可以帮助开发者在单页面应用中管理路由。具体实现功能包括：设置默认路由、设置路由、载入路由、获取路由 DOM 元素等。
类 ApeeRouter 实例化时，可以接受一个配置选项 options，其中 options.default 表示默认路由选项，options.routeSet 表示路由列表选项。类 ApeeRouter 的构造函数可以根据选项设置默认路由和路由列表。
路由列表使用一个 Record 类型变量 routeList 进行存储，路由的 key 值是字符串类型，值为一个 Route 类型的对象。Route 类型包含 name、event、dom、data、args、status 等属性。name 表示路由名称，event 表示路由事件，dom 表示路由对应的 DOM 元素，data 表示路由数据，args 表示路由参数，status 表示路由状态。
类 ApeeRouter 中提供了 setDefaultRoute、set、getRouteDom、loadRoute 和 start 等方法。setDefaultRoute 方法用于设置默认路由，参数 _default 可以是字符串或字符串数组类型。set 方法用于设置路由，参数 routeName 可以是字符串或字符串数组类型，参数 routeEvent 可以是 RouteEventSetOption 或 RouteEventSetOption 数组类型。getRouteDom 方法用于获取路由 DOM 元素，可以根据是否排除某个路由 DOM 元素来传入不同的参数。loadRoute 方法用于载入路由，参数 route 为 Route 类型的路由对象，参数 args 为路由参数。start 方法用于启动路由系统，会根据 URL 地址中的 hash 值来载入对应的路由。
此外，代码中使用了一些类型定义，如 InitOption、RouteSetOption、DefaultRouteOption、RouteNameSetOption、RouteEventSetOption 等。其中，InitOption 类型表示实例化 ApeeRouter 类时传入的配置选项类型，RouteSetOption 类型表示设置路由列表时传入的路由选项类型，DefaultRouteOption 类型表示设置默认路由时传入的选项类型，RouteNameSetOption 类型表示设置路由时传入的路由名称类型，RouteEventSetOption 类型表示设置路由时传入的路由事件类型。
Select Language