feat(timestamp): 重构时间戳模块并优化时区处理
- 将时区列表提取到独立常量文件 `timezone.js` 中,便于维护和扩展 - 重构时间戳显示逻辑,将初始化功能从事件处理器中分离 - 引入 timerManager、eventManager 和 scriptManager 进行资源统一管理 - 更新 DOM 操作方式,使用 window.eventManager 替代直接 addEventListener - 改进时间戳更新函数,支持传入元素引用以提高灵活性 - 在路由加载脚本时增加调试日志,方便追踪组件加载过程 - 移除冗余的 DOM 工具函数(如 getElementById),统一使用原生方法 - 修复计时器清理问题,确保通过 timerManager 正确清除定时任务 - 初始化时间戳和日期输入框默认值,提升用户体验
This commit is contained in:
@@ -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, ' ');
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user