feat(sidepanel): 实现基于组件的架构并优化路由管理
- 引入 BaseComponent 基类统一管理事件、定时器和脚本加载 - 重构 timestamp 模块为继承自 BaseComponent 的类组件 - 新增 ScriptManager 工具类用于动态加载和卸载脚本 - 修改路由配置支持按需加载页面对应的 JS 模块 - 路由切换时自动销毁旧组件实例以防止内存泄漏 - 更新文件引用路径适配新的目录结构 - 修复 rollup 配置中的语法问题及端口配置 - 移除无用的日志输出和冗余代码提升性能
This commit is contained in:
雨霖铃
+77
-91
@@ -1,108 +1,94 @@
|
||||
import {
|
||||
handleToggleUnit,
|
||||
handleStopTimer,
|
||||
handleStartTimer,
|
||||
handleConvertTimestamp,
|
||||
handleConvertDateToTimestamp,
|
||||
handleCopyTimestamp,
|
||||
handleClosePanel,
|
||||
handleTimezoneResult,
|
||||
handleConvertDateToTimestamp,
|
||||
handleConvertTimestamp,
|
||||
handleCopyTimestamp,
|
||||
handleStartTimer,
|
||||
handleStopTimer,
|
||||
handleTimezoneInput,
|
||||
handleTimezoneResult,
|
||||
handleToggleUnit,
|
||||
} from '../modules/eventHandlers.js';
|
||||
import { updateTimestamp } from '../utils/timestampUtils.js';
|
||||
import { addEventListenerById } from '../utils/domUtils.js';
|
||||
import { timeZoneList } from './const/timezone.js';
|
||||
import {updateTimestamp} from './utils/timestampUtils.js';
|
||||
import {timeZoneList} from './const/timezone.js';
|
||||
|
||||
const BaseComponent = window.BaseComponent;
|
||||
|
||||
// 定义一个全局变量来保存是否显示毫秒
|
||||
let showMilliseconds = true;
|
||||
// 定义一个全局变量来保存计时器
|
||||
let timestampInterval;
|
||||
// 获取本地时区
|
||||
const localTimeZone = new Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
|
||||
/**
|
||||
* 初始化时间戳显示
|
||||
*/
|
||||
function initTimestampDisplay() {
|
||||
const currentTimestampValue = document.getElementById('current-timestamp-value');
|
||||
|
||||
// 初始化时更新一次时间戳
|
||||
updateTimestamp(currentTimestampValue, showMilliseconds);
|
||||
|
||||
// 添加时间戳定时器
|
||||
if (timestampInterval) {
|
||||
console.log('clearInterval');
|
||||
clearInterval(timestampInterval);
|
||||
window.timerManager.clearInterval(timestampInterval);
|
||||
class Timestamp extends BaseComponent {
|
||||
constructor() {
|
||||
super();
|
||||
this.init();
|
||||
// 定义一个全局变量来保存是否显示毫秒
|
||||
this.showMilliseconds = true;
|
||||
// 定义一个全局变量来保存计时器
|
||||
this.timestampInterval = null;
|
||||
}
|
||||
timestampInterval = setInterval(
|
||||
() => updateTimestamp(currentTimestampValue, showMilliseconds),
|
||||
100
|
||||
);
|
||||
window.timerManager.setInterval(timestampInterval);
|
||||
|
||||
initTimeZoneList();
|
||||
initTimestampAndDate();
|
||||
}
|
||||
async init() {
|
||||
const currentTimestampValue = document.getElementById('current-timestamp-value');
|
||||
|
||||
/**
|
||||
* 初始化时区列表
|
||||
*/
|
||||
function initTimeZoneList() {
|
||||
const timezoneResultSelect = document.getElementById('timezone-result');
|
||||
const timezoneInputSelect = document.getElementById('timezone-input');
|
||||
// 初始化时更新一次时间戳
|
||||
updateTimestamp(currentTimestampValue, this.showMilliseconds);
|
||||
|
||||
// 获取本地时区在列表中的索引
|
||||
const localTimeZoneIndex = timeZoneList.indexOf(localTimeZone);
|
||||
this.setInterval(() => updateTimestamp(currentTimestampValue, this.showMilliseconds), 100);
|
||||
|
||||
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 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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化时间戳和日期输入框
|
||||
*/
|
||||
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);
|
||||
window.timestamp = Timestamp;
|
||||
Reference in New Issue
Block a user