```

feat(router): 引入路由系统并重构页面结构 - 为项目引入基于 hash 的前端路由系统，支持多页面切换与动态加载 - 将原有单一 bundle 拆分为多个入口打包（index.js 和 timestamp.js） - 修改 Rollup 配置以支持多输出文件及插件共享 - 更新 HTML 结构以适配路由容器和页面占位元素 - 调整 CSS 样式，移除旧的页面切换动画，交由路由控制 - 优化 domUtils 工具函数，并迁移部分样式处理逻辑 - 在 timestamp.js 中封装初始化函数以便路由调用 - todolist 页面模板新增，用于后续功能开发 ```
2025-11-27 23:04:24 +08:00
parent ed6053473d
commit 884fc09750
10 changed files with 293 additions and 164 deletions
@@ -5,16 +5,9 @@ import json from '@rollup/plugin-json';
 import livereload from 'rollup-plugin-livereload';
 import serve from 'rollup-plugin-serve';

-export default defineConfig({
-  input: 'sidepanel/js/index.js',
-  output: {
-    file: 'dist/bundle.js',
-    format: 'iife',
-  },
-  plugins: [
-    resolve(),
-    commonjs(),
-    json(),
+const basePlugins = [resolve(), commonjs(), json()];
+
+const devPlugins = [
  livereload({
    watch: ['dist', 'sidepanel'],
    verbose: false,
@@ -27,10 +20,26 @@ export default defineConfig({
      'Access-Control-Allow-Origin': '*',
    },
  }),
-  ],
-  watch: {
-    include: ['sidepanel/**/*'],
-    exclude: ['node_modules/**/*'],
-    clearScreen: false,
+];
+
+export default defineConfig([
+  {
+    input: 'sidepanel/js/index.js',
+    output: {
+      file: 'dist/index.js',
+      format: 'iife',
+      name: 'MainPage',
    },
-});
+    plugins: [...basePlugins, ...devPlugins],
+  },
+
+  {
+    input: 'sidepanel/js/timestamp.js',
+    output: {
+      file: 'dist/timestamp.js',
+      format: 'iife',
+      name: 'TimestampPage',
+    },
+    plugins: [...basePlugins, ...devPlugins],
+  },
+]);
@@ -10,12 +10,18 @@
  <body>
    <!-- 导航栏 -->
    <nav class="navbar">
-      <button class="nav-button active">时间戳转换</button>
-      <button class="nav-button">任务清单</button>
+      <button class="nav-button active" id="timestamp-jump">时间戳转换</button>
+      <button class="nav-button" id="todo-jump">任务清单</button>
      <button id="close-panel-btn" class="close-button">X</button>
    </nav>
-    <div id="app"></div>
+    <div id="app">
+      <div class="page" hash="/home">
+        <div class="page-content">
+          <div id="home"></div>
+        </div>
+      </div>
+    </div>

-    <script src="../dist/bundle.js"></script>
+    <script src="../dist/index.js"></script>
  </body>
 </html>
@@ -1,17 +1,58 @@
-// 导入时间戳工具的初始化函数和事件处理
-import './timestamp.js';
+console.log('Before creating router');
+import { Router } from '../modules/Router.js';

-// 导入页面切换功能
-import { switchPage } from '../utils/domUtils.js';
+import * as PageModules from '../../dist/timestamp.js';

-// 页面切换逻辑
-import { addEventListenerById } from '../utils/domUtils.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;

-addEventListenerById('nav-timestamp-btn', 'click', () => {
-  switchPage('timestamp');
-});
-
-// 计时器页面切换
-addEventListenerById('nav-other-tools-btn', 'click', () => {
-  switchPage('other-tools');
+        // 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');
 });
@@ -12,6 +12,8 @@ import {
 } from '../modules/eventHandlers.js';
 import { addEventListenerById } from '../utils/domUtils.js';

+export function init() {
+  console.log('timestamp init')
  // 初始化时间戳显示
  initTimestampDisplay();

@@ -33,3 +35,4 @@ addEventListenerById('close-panel-btn', 'click', handleClosePanel);
  addEventListenerById('timezone-result', 'change', handleTimezoneResult);
  // 绑定输入时区事件
  addEventListenerById('timezone-input', 'change', handleTimezoneInput);
+}
@@ -1,12 +1,20 @@
-import {
-  RouteUtils,
-  addClass,
-  removeClass,
-  hasClass,
-  getParamsUrl,
-  closure,
-  genKey,
-} from '../utils/routeUtils.js';
+import { getParamsUrl, closure, genKey } from '../utils/routeUtils.js';
+
+import { addClass, removeClass, hasClass } from '../utils/domUtils.js';
+// var config = {
+//     routerViewId: '#routerView', // 路由切换的挂载点 id
+//     stackPages: true, // 多级页面缓存
+//     animationName: "slide", // 多级页面缓存
+//     routes: [
+//         // {
+//         //   path: "/home",
+//         //   name: "home",
+//         //   callback: function(transition) {
+//         //       home()
+//         //   }
+//         // }
+//     ]
+// }
 class Router {
  constructor() {
    // 路由表
@@ -32,14 +40,23 @@ class Router {
  }

  init(config) {
-    this.routerMap = config ? config.routers : this.routerMap;
+    this.routerMap = config ? config.routes : this.routerMap;
    this.routerViewId = config ? config.routerViewId : this.routerViewId;
    this.stackPages = config ? config.stackPages : this.stackPages;

+    const name = document.querySelector('#app').getAttribute('data-animationName');
+    if (name) {
+      this.animationName = name;
+    }
+    this.animationName = config ? config.animationName : this.animationName;
+
+    this.map();
+
    if (!this.routerMap.length) {
-      let selector = this.routerViewId + '.page';
-      let pages = document.querySelectorAll(selector);
+      // 找到routerViewId 节点下的所有page 节点
+      const pages = document.querySelectorAll(this.routerViewId + ' .page');
      for (let i = 0; i < pages.length; i++) {
+        // 遍历所有的page节点
        let page = pages[i];
        let hash = page.getAttribute('hash');
        let name = hash.substring(1);
@@ -60,13 +77,13 @@ class Router {
      }
    };

-    window.addEventListener(
-      'load',
-      function (event) {
+    window.addEventListener('load', (event) => {
      this.historyChange(event);
-      },
-      false
-    );
+    });
+
+    window.addEventListener('hashchange', (event) => {
+      this.historyChange(event);
+    });
  }

  /**
@@ -74,29 +91,41 @@ class Router {
   * @param {*} event
   */
  historyChange(event) {
+    // {path, query, params}
    const currentHash = getParamsUrl();
+    // router-#app-history
    const nameString = 'router-' + this.routerViewId + '-history';
+
    this.history = window.sessionStorage[nameString]
      ? JSON.parse(window.sessionStorage[nameString])
      : [];

-    let back = false,
-      refresh = false,
-      forward = false,
-      index = 0,
-      len = this.history.length;
+    // 返回上一级
+    let back = false;
+    // 刷新页面
+    let refresh = false;
+    // 前进上一级
+    let forward = false;
+    // 获取当前路由的索引
+    let index = 0;

-    for (let i = 0; i < len; i++) {
+    for (let i = 0; i < this.history.length; i++) {
      let h = this.history[i];
+
+      // 判断是否是当前路由
      if (h.hash === currentHash.path && h.key === currentHash.query.key) {
+        // 获取当前路由的索引
        index = i;
-        if (i === len - 1) {
+        // 判断是否是刷新页面
+        if (i === this.history.length - 1) {
          refresh = true;
        } else {
+          // 判断是否是返回上一级
          back = true;
        }
        break;
      } else {
+        // 判断是否是前进
        forward = true;
      }
    }
@@ -124,18 +153,22 @@ class Router {
    this.urlChange();
  }

+  /**
+   * 更改页面
+   * @param {*} currentHash
+   */
  changeView(currentHash) {
    const pages = document.querySelectorAll(' .page');
    const previousPage = document.querySelector('.' + this.routerViewId + ' .page.active');
    let currentPage = null;
-    let currentHash = null;
+    let currHash = null;

    for (let i = 0; i < pages.length; i++) {
      let page = pages[i];
      let hash = page.getAttribute('hash');
      page.setAttribute('class', 'page');
      if (hash === currentHash.path) {
-        currentHash = hash;
+        currHash = hash;
        currentPage = page;
      }
    }
@@ -167,12 +200,15 @@ class Router {
        removeClass(currentPage, 'current');
      }, 300);
      currentPage.scrollTop = 0;
-      this.routes[currentHash].callback ? this.routes[currentHash].callback() : null;
+      this.routes[currHash].callback ? this.routes[currHash].callback() : null;
    }

    this.afterFun ? this.afterFun(currentHash) : null;
  }

+  /**
+   * url改变
+   */
  urlChange() {
    const currentHash = getParamsUrl();
    if (this.routes[currentHash.path]) {
@@ -194,6 +230,9 @@ class Router {
    }
  }

+  /**
+   * 映射路由
+   */
  map() {
    for (let i = 0; i < this.routerMap.length; i++) {
      let route = this.routerMap[i];
@@ -204,26 +243,42 @@ class Router {
      }

      let newPath = route.path;
-      let path = newPath.repalce(/\s+/g, '');
+      let path = newPath.replace(/\s+/g, '');
      this.routes[path] = {
        callback: route.callback,
      };
    }
  }

+  /**
+   *  切换页面前的hook
+   * @param {*} callback hook执行函数
+   */
+
  beforeEach(callback) {
    if (Object.prototype.toString.call(callback) === '[object Function]') {
+      // 判断callback是否为函数
      this.beforeFun = callback;
    } else {
+      // 抛出错误
      console.trace('beforeEach callback must be a function');
    }
  }

+  /**
+   *  切换页面后的hook
+   * @param {*} callback hook执行函数
+   */
+
  afterEach(callback) {
    if (Object.prototype.toString.call(callback) === '[object Function]') {
+      // 判断callback是否为函数
      this.afterFun = callback;
    } else {
+      // 抛出错误
      console.trace('afterEach callback must be a function');
    }
  }
 }
+
+export { Router };
@@ -1,4 +1,4 @@
-<div id="page-timestamp" class="page active">
+<div id="page-timestamp" class="page">
  <h2>时间戳工具</h2>
  <div id="current-timestamp">
    <h2>当前时间戳</h2>
@@ -0,0 +1,3 @@
+<div id="page-timestamp" class="page">
+  <h2>任务清单</h2>
+</div>
@@ -53,7 +53,8 @@
  p a {
    box-sizing: border-box;
    color: #2b2b2b;
-    font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New,
+      monospace;
  }

  button {
@@ -150,27 +151,6 @@
  overflow: hidden;
 }

-/* 页面切换动画 */
-.page {
-  display: none;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 1rem;
-  opacity: 0;
-  transform: translateX(20px);
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
-.page.active {
-  display: block;
-  position: relative;
-  opacity: 1;
-  transform: translateX(0);
-  transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
 /* 按钮点击效果 */
 .button:active,
 .convert-button:active,
@@ -49,7 +49,8 @@ export function switchPage(pageName) {
  }

  // 激活对应的导航按钮
-  const navButton = document.getElementById(`nav-${pageName}-btn`) || document.getElementById(`nav-${pageName}`);
+  const navButton =
+    document.getElementById(`nav-${pageName}-btn`) || document.getElementById(`nav-${pageName}`);
  if (navButton) {
    navButton.classList.add('active');
  }
@@ -76,3 +77,45 @@ export function addEventListenerById(id, event, handler) {
    element.addEventListener(event, handler);
  }
 }
+
+/**
+ * 判断元素是否包含指定类名
+ * @param {*} elem
+ * @param {*} cls
+ * @returns
+ */
+export function hasClass(elem, cls) {
+  cls = cls || '';
+  // 检测类名是否为''
+  if (cls.replace(/\s/g, '').length === 0) return false;
+  // 检测elem类名是否包含cls指定类名
+  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
+}
+
+/**
+ * 为元素添加类名
+ * @param {*} elem
+ * @param {*} cls
+ */
+export function addClass(elem, cls) {
+  if (!hasClass(elem, cls)) {
+    elem.className = elem.className === '' ? cls : elem.className + ' ' + cls;
+  }
+}
+
+/**
+ * 为元素删除类名
+ * @param {*} elem
+ * @param {*} cls
+ */
+export function removeClass(elem, cls) {
+  if (hasClass(elem, cls)) {
+    let newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
+    // 删除指定类名
+    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
+      newClass = newClass.replace(' ' + cls + ' ', ' ');
+    }
+    // 重新赋值
+    elem.className = newClass.replace(/^\s+|\s+$/);
+  }
+}
@@ -1,13 +1,16 @@
 /**
- * 获取路由的路径和详情参数
+ * 获取路由的路径和详细参数
 * @returns
 */
 export function getParamsUrl() {
-  let hasDetail = location.hash.split('?');
-  let hasName = hasDetail[0].split('#')[1];
-  let params = hasDetail[1] ? hasDetail[1].split('&') : [];
+  // 获取路由
+  const hasDetail = location.hash.split('?');
+  // 获取路由名称
+  const hasName = hasDetail[0].split('#')[1];
+  // 获取请求参数
+  const params = hasDetail[1] ? hasDetail[1].split('&') : [];
+  // 解析请求参数
  let query = {};
-
  for (let i = 0; i < params.length; i++) {
    let param = params[i].split('=');
    query[param[0]] = param[1];
@@ -20,40 +23,26 @@ export function getParamsUrl() {
  };
 }

+/**
+ * 闭包返回函数
+ * @param {*} name
+ * @returns
+ */
 export function closure(name) {
-    function fun(currentHash) {
-        window.name&&window[name](currentHash)
-    }
-    return fun;
+  return (currentHash) => {
+    window.name && window[name](currentHash);
+  };
 }

+/**
+ * 生成随机key
+ * @returns
+ */
 export function genKey() {
-    let temp = 'xxxxxxxx';
-    return temp.replace(/[xy]/g, function (c) {
-        let r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+  const KEY_TEMPLATE = 'xxxxxxxx';
+  return KEY_TEMPLATE.replace(/[xy]/g, (c) => {
+    const r = (Math.random() * 16) | 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
 }
-
-export function hasClass(elem, cls) {
-    cls = cls || '';
-    if (cls.replace(/\s/g, '').length === 0)
-        return false;
-    return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
-}
-
-export function addClass(elem, cls) {
-    if (!hasClass(elem, cls)) {
-        elem.className = elem.className === '' ? cls : elem.className + ' ' + cls;
-    }
-}
-
-export function removeClass(elem, cls) {
-    if (hasClass(elem, cls)) {
-        let newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
-        while (newClass.indexOf(' ' + cls + ' ') >= 0) {
-            newClass = newClass.replace(' ' + cls + ' ', ' ');
-        }
-        elem.className = newClass.replace(/^\s+|\s+$/)
-    }
-}