雨霖铃
aaefc9c3fc
- 引入 BaseComponent 基类统一管理事件、定时器和脚本加载 - 重构 timestamp 模块为继承自 BaseComponent 的类组件 - 新增 ScriptManager 工具类用于动态加载和卸载脚本 - 修改路由配置支持按需加载页面对应的 JS 模块 - 路由切换时自动销毁旧组件实例以防止内存泄漏 - 更新文件引用路径适配新的目录结构 - 修复 rollup 配置中的语法问题及端口配置 - 移除无用的日志输出和冗余代码提升性能
49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
import {ScriptManager} from './utils/scriptManager.js';
|
|
import {TimerManager} from './utils/timerManager.js';
|
|
import {EventManager} from './utils/eventManager.js';
|
|
import {Router} from '../modules/Router.js';
|
|
|
|
const config = {
|
|
routerViewId: 'app',
|
|
stackPages: false,
|
|
routes: [
|
|
{
|
|
path: '/',
|
|
name: 'timestamp',
|
|
html: 'pages/timestamp.html',
|
|
script: '../dist/timestamp.js',
|
|
},
|
|
{
|
|
path: '/home',
|
|
name: 'timestamp',
|
|
html: 'pages/timestamp.html',
|
|
script: '../dist/timestamp.js',
|
|
},
|
|
{
|
|
path: '/todo',
|
|
name: 'todo',
|
|
html: 'pages/todolist.html',
|
|
},
|
|
],
|
|
};
|
|
|
|
// 注入脚本管理器
|
|
window.scriptManager = new ScriptManager();
|
|
// 注入定时器管理器
|
|
window.timerManager = new TimerManager();
|
|
// 注入事件管理器
|
|
window.eventManager = new EventManager();
|
|
|
|
const router = new Router();
|
|
router.init(config);
|
|
|
|
// click delegation
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('[data-route]');
|
|
if (!btn) return;
|
|
const p = btn.getAttribute('data-route');
|
|
location.hash = p;
|
|
// update active styling
|
|
document.querySelectorAll('[data-route]').forEach((b) => b.classList.toggle('active', b === btn));
|
|
});
|