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

- 将时区列表提取到独立常量文件 `timezone.js` 中,便于维护和扩展
- 重构时间戳显示逻辑,将初始化功能从事件处理器中分离
- 引入 timerManager、eventManager 和 scriptManager 进行资源统一管理
- 更新 DOM 操作方式,使用 window.eventManager 替代直接 addEventListener
- 改进时间戳更新函数,支持传入元素引用以提高灵活性
- 在路由加载脚本时增加调试日志,方便追踪组件加载过程
- 移除冗余的 DOM 工具函数(如 getElementById),统一使用原生方法
- 修复计时器清理问题,确保通过 timerManager 正确清除定时任务
- 初始化时间戳和日期输入框默认值,提升用户体验
This commit is contained in:
雨霖铃
2025-12-10 22:16:10 +08:00
parent 28fc3b409f
commit 4a76561a85
9 changed files with 186 additions and 192 deletions
+4 -67
View File
@@ -2,69 +2,6 @@
* DOM工具类函数
*/
/**
* 切换页面显示(带动画效果)
* @param {string} pageName - 页面名称
*/
export function switchPage(pageName) {
// 先隐藏当前活跃页面(如果有)
const currentPage = document.querySelector('.page.active');
if (currentPage) {
currentPage.classList.remove('active');
// 添加离开动画
currentPage.style.opacity = '0';
currentPage.style.transform = 'translateX(20px)';
// 等待动画完成后真正隐藏
setTimeout(() => {
if (!currentPage.classList.contains('active')) {
currentPage.style.display = 'none';
}
}, 300);
}
// 移除所有导航按钮的 active 状态
document.querySelectorAll('.nav-button').forEach((button) => {
button.classList.remove('active');
});
// 显示目标页面
const targetPage = document.getElementById(`page-${pageName}`);
if (targetPage) {
targetPage.style.display = 'block';
// 触发重排以确保display变化生效
targetPage.offsetHeight;
// 添加进入动画
targetPage.style.opacity = '0';
targetPage.style.transform = 'translateX(-20px)';
setTimeout(() => {
targetPage.classList.add('active');
targetPage.style.opacity = '1';
targetPage.style.transform = 'translateX(0)';
}, 10);
}
// 激活对应的导航按钮
const navButton =
document.getElementById(`nav-${pageName}-btn`) || document.getElementById(`nav-${pageName}`);
if (navButton) {
navButton.classList.add('active');
}
}
/**
* 根据ID获取元素的便捷方法
* @param {string} id - 元素ID
* @returns {HTMLElement} - DOM元素
*/
export function getElementById(id) {
return document.getElementById(id);
}
/**
* 为元素添加事件监听器
* @param {string} id - 元素ID
@@ -72,9 +9,9 @@ export function getElementById(id) {
* @param {Function} handler - 事件处理函数
*/
export function addEventListenerById(id, event, handler) {
const element = getElementById(id);
if (element) {
element.addEventListener(event, handler);
const ele = document.getElementById(id);
if (ele) {
window.eventManager.add(ele, event, handler);
}
}
@@ -136,4 +73,4 @@ export function removeClass(elem, cls) {
// 过滤多余空格
elem.className = klass.trim().replace(/\s+/g, ' ');
}
}