feat(timestamp): 重构时间戳模块并优化时区处理

- 将时区列表提取到独立常量文件 `timezone.js` 中，便于维护和扩展 - 重构时间戳显示逻辑，将初始化功能从事件处理器中分离 - 引入 timerManager、eventManager 和 scriptManager 进行资源统一管理 - 更新 DOM 操作方式，使用 window.eventManager 替代直接 addEventListener - 改进时间戳更新函数，支持传入元素引用以提高灵活性 - 在路由加载脚本时增加调试日志，方便追踪组件加载过程 - 移除冗余的 DOM 工具函数（如 getElementById），统一使用原生方法 - 修复计时器清理问题，确保通过 timerManager 正确清除定时任务 - 初始化时间戳和日期输入框默认值，提升用户体验
2025-12-10 22:16:10 +08:00
parent 28fc3b409f
commit 4a76561a85
9 changed files with 186 additions and 192 deletions
@@ -1,5 +1,4 @@
 import {
-  initTimestampDisplay,
  handleToggleUnit,
  handleStopTimer,
  handleStartTimer,
@@ -10,30 +9,100 @@ import {
  handleTimezoneResult,
  handleTimezoneInput,
 } from '../modules/eventHandlers.js';
+import { updateTimestamp } from '../utils/timestampUtils.js';
 import { addEventListenerById } from '../utils/domUtils.js';
+import { timeZoneList } from './const/timezone.js';

-(function (global) {
-  global.timestampInit = async function () {
-    // 初始化时间戳显示
-    initTimestampDisplay();
+// 定义一个全局变量来保存是否显示毫秒
+let showMilliseconds = true;
+// 定义一个全局变量来保存计时器
+let timestampInterval;
+// 获取本地时区
+const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;

-    // 绑定事件处理器
-    // 绑定时间戳相关按钮事件
-    addEventListenerById('toggle-unit-btn', 'click', handleToggleUnit);
-    // 绑定计时器相关按钮事件
-    addEventListenerById('stop-timer-btn', 'click', handleStopTimer);
-    addEventListenerById('start-timer-btn', 'click', handleStartTimer);
-    // 绑定时间戳转换按钮事件
-    addEventListenerById('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp);
-    // 绑定日期转换按钮事件
-    addEventListenerById('convert-date-to-timestamp-btn', 'click', handleConvertDateToTimestamp);
-    // 绑定复制时间戳按钮事件
-    addEventListenerById('copy-timestamp-btn', 'click', handleCopyTimestamp);
-    // 绑定关闭面板按钮事件
-    addEventListenerById('close-panel-btn', 'click', handleClosePanel);
-    // 绑定切换时区事件
-    addEventListenerById('timezone-result', 'change', handleTimezoneResult);
-    // 绑定输入时区事件
-    addEventListenerById('timezone-input', 'change', handleTimezoneInput);
-  };
-})(window);
+/**
+ * 初始化时间戳显示
+ */
+function initTimestampDisplay() {
+  const currentTimestampValue = document.getElementById('current-timestamp-value');
+
+  // 初始化时更新一次时间戳
+  updateTimestamp(currentTimestampValue, showMilliseconds);
+
+  // 添加时间戳定时器
+  if (timestampInterval) {
+    console.log('clearInterval');
+    clearInterval(timestampInterval);
+    window.timerManager.clearInterval(timestampInterval);
+  }
+  timestampInterval = setInterval(
+    () => updateTimestamp(currentTimestampValue, showMilliseconds),
+    100
+  );
+  window.timerManager.setInterval(timestampInterval);
+
+  initTimeZoneList();
+  initTimestampAndDate();
+}
+
+/**
+ * 初始化时区列表
+ */
+function initTimeZoneList() {
+  const timezoneResultSelect = document.getElementById('timezone-result');
+  const timezoneInputSelect = document.getElementById('timezone-input');
+
+  // 获取本地时区在列表中的索引
+  const localTimeZoneIndex = timeZoneList.indexOf(localTimeZone);
+
+  for (let i = 0; i < timeZoneList.length; i++) {
+    if (i === localTimeZoneIndex) {
+      // 默认选中本地时区
+      timezoneResultSelect.add(new Option(timeZoneList[i], i, true, true));
+      timezoneInputSelect.add(new Option(timeZoneList[i], i, true, true));
+    } else {
+      timezoneResultSelect.add(new Option(timeZoneList[i], i));
+      timezoneInputSelect.add(new Option(timeZoneList[i], i));
+    }
+  }
+}
+
+/**
+ * 初始化时间戳和日期输入框
+ */
+function initTimestampAndDate() {
+  const timestampInput = document.getElementById('timestamp-input');
+  const dateInput = document.getElementById('datetime-input');
+
+  timestampInput.value = Date.now();
+  dateInput.value = new Date().toLocaleString('sv-SE');
+}
+
+// 初始化时间戳显示
+initTimestampDisplay();
+
+// 绑定时间戳相关按钮事件
+addEventListenerById(
+  'toggle-unit-btn',
+  'click',
+  () => (showMilliseconds = handleToggleUnit(showMilliseconds))
+);
+// 绑定计时器相关按钮事件
+addEventListenerById('stop-timer-btn', 'click', () => handleStopTimer(timestampInterval));
+addEventListenerById(
+  'start-timer-btn',
+  'click',
+  () => (timestampInterval = handleStartTimer(timestampInterval, showMilliseconds))
+);
+// 绑定时间戳转换按钮事件
+addEventListenerById('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp);
+// 绑定日期转换按钮事件
+addEventListenerById('convert-date-to-timestamp-btn', 'click', handleConvertDateToTimestamp);
+// 绑定复制时间戳按钮事件
+addEventListenerById('copy-timestamp-btn', 'click', handleCopyTimestamp);
+// 绑定关闭面板按钮事件
+addEventListenerById('close-panel-btn', 'click', handleClosePanel);
+// 绑定切换时区事件
+addEventListenerById('timezone-result', 'change', handleTimezoneResult);
+// 绑定输入时区事件
+addEventListenerById('timezone-input', 'change', handleTimezoneInput);