雨霖铃
884fc09750
feat(router): 引入路由系统并重构页面结构 - 为项目引入基于 hash 的前端路由系统，支持多页面切换与动态加载 - 将原有单一 bundle 拆分为多个入口打包（index.js 和 timestamp.js） - 修改 Rollup 配置以支持多输出文件及插件共享 - 更新 HTML 结构以适配路由容器和页面占位元素 - 调整 CSS 样式，移除旧的页面切换动画，交由路由控制 - 优化 domUtils 工具函数，并迁移部分样式处理逻辑 - 在 timestamp.js 中封装初始化函数以便路由调用 - todolist 页面模板新增，用于后续功能开发 ```
59 lines
1.8 KiB
JavaScript
59 lines
1.8 KiB
JavaScript
console.log('Before creating router');
|
|
import { Router } from '../modules/Router.js';
|
|
|
|
import * as PageModules from '../../dist/timestamp.js';
|
|
|
|
const config = {
|
|
routerViewId: 'app', // 路由切换的挂载点 id
|
|
stackPages: false, // 多级页面缓存
|
|
animationName: 'fade', // 切换页面时的动画
|
|
routes: [
|
|
{
|
|
path: '/home',
|
|
name: 'home',
|
|
callback: async () => {
|
|
// 1. 加载 HTML
|
|
const html = await fetch('pages/timestamp.html').then((r) => r.text());
|
|
document.getElementById('home').innerHTML = html;
|
|
|
|
// 2. 动态加载对应 JS
|
|
const script = document.createElement('script');
|
|
script.src = '/dist/timestamp.js'; // IIFE 打包后的文件
|
|
script.onload = () => {
|
|
// 3. 执行 IIFE 暴露的全局对象方法
|
|
TimestampPage.init(); // 假设 timestamp.js 输出 name: 'TimestampPage'
|
|
};
|
|
document.body.appendChild(script);
|
|
},
|
|
},
|
|
{
|
|
path: '/todo',
|
|
name: 'todo',
|
|
callback: async () => {
|
|
// 1. 加载 HTML
|
|
const html = await fetch('pages/todolist.html').then((r) => r.text());
|
|
document.getElementById('todo').innerHTML = html;
|
|
|
|
// 2. 动态加载对应 JS
|
|
const script = document.createElement('script');
|
|
script.src = '/dist/timestamp.js'; // IIFE 打包后的文件
|
|
script.onload = () => {
|
|
// 3. 执行 IIFE 暴露的全局对象方法
|
|
TimestampPage.init(); // 假设 timestamp.js 输出 name: 'TimestampPage'
|
|
};
|
|
document.body.appendChild(script);
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
const router = new Router();
|
|
console.log('Router created:', router);
|
|
router.init(config);
|
|
console.log('Router initialized');
|
|
|
|
document.getElementById('todo-jump').addEventListener('click', () => {
|
|
console.log('Jumping to todo page');
|
|
window.linkTo('#/todo');
|
|
});
|