雨霖铃
aaefc9c3fc
- 引入 BaseComponent 基类统一管理事件、定时器和脚本加载 - 重构 timestamp 模块为继承自 BaseComponent 的类组件 - 新增 ScriptManager 工具类用于动态加载和卸载脚本 - 修改路由配置支持按需加载页面对应的 JS 模块 - 路由切换时自动销毁旧组件实例以防止内存泄漏 - 更新文件引用路径适配新的目录结构 - 修复 rollup 配置中的语法问题及端口配置 - 移除无用的日志输出和冗余代码提升性能
94 lines
3.2 KiB
JavaScript
94 lines
3.2 KiB
JavaScript
import {
|
|
handleClosePanel,
|
|
handleConvertDateToTimestamp,
|
|
handleConvertTimestamp,
|
|
handleCopyTimestamp,
|
|
handleStartTimer,
|
|
handleStopTimer,
|
|
handleTimezoneInput,
|
|
handleTimezoneResult,
|
|
handleToggleUnit,
|
|
} from '../modules/eventHandlers.js';
|
|
import {updateTimestamp} from './utils/timestampUtils.js';
|
|
import {timeZoneList} from './const/timezone.js';
|
|
|
|
const BaseComponent = window.BaseComponent;
|
|
|
|
// 获取本地时区
|
|
const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
|
|
class Timestamp extends BaseComponent {
|
|
constructor() {
|
|
super();
|
|
this.init();
|
|
// 定义一个全局变量来保存是否显示毫秒
|
|
this.showMilliseconds = true;
|
|
// 定义一个全局变量来保存计时器
|
|
this.timestampInterval = null;
|
|
}
|
|
|
|
async init() {
|
|
const currentTimestampValue = document.getElementById('current-timestamp-value');
|
|
|
|
// 初始化时更新一次时间戳
|
|
updateTimestamp(currentTimestampValue, this.showMilliseconds);
|
|
|
|
this.setInterval(() => updateTimestamp(currentTimestampValue, this.showMilliseconds), 100);
|
|
|
|
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));
|
|
}
|
|
}
|
|
|
|
const timestampInput = document.getElementById('timestamp-input');
|
|
const dateInput = document.getElementById('datetime-input');
|
|
|
|
timestampInput.value = Date.now();
|
|
dateInput.value = new Date().toLocaleString('sv-SE');
|
|
|
|
this.bindBtnEvent();
|
|
}
|
|
|
|
bindBtnEvent() {
|
|
// 绑定时间戳相关按钮事件
|
|
this.bindEvent(
|
|
'toggle-unit-btn',
|
|
'click',
|
|
() => (this.showMilliseconds = handleToggleUnit(this.showMilliseconds))
|
|
);
|
|
|
|
// 绑定计时器相关按钮事件
|
|
this.bindEvent('stop-timer-btn', 'click', () => handleStopTimer(this.timestampInterval));
|
|
this.bindEvent(
|
|
'start-timer-btn',
|
|
'click',
|
|
() => (this.timestampInterval = handleStartTimer(this.timestampInterval, this.showMilliseconds))
|
|
);
|
|
// 绑定时间戳转换按钮事件
|
|
this.bindEvent('convert-timestamp-to-date-btn', 'click', handleConvertTimestamp);
|
|
// 绑定日期转换按钮事件
|
|
this.bindEvent('convert-date-to-timestamp-btn', 'click', handleConvertDateToTimestamp);
|
|
// 绑定复制时间戳按钮事件
|
|
this.bindEvent('copy-timestamp-btn', 'click', handleCopyTimestamp);
|
|
// 绑定关闭面板按钮事件
|
|
this.bindEvent('close-panel-btn', 'click', handleClosePanel);
|
|
// 绑定切换时区事件
|
|
this.bindEvent('timezone-result', 'change', handleTimezoneResult);
|
|
// 绑定输入时区事件
|
|
this.bindEvent('timezone-input', 'change', handleTimezoneInput);
|
|
}
|
|
}
|
|
|
|
window.timestamp = Timestamp; |