aaefc9c3fc
- 引入 BaseComponent 基类统一管理事件、定时器和脚本加载 - 重构 timestamp 模块为继承自 BaseComponent 的类组件 - 新增 ScriptManager 工具类用于动态加载和卸载脚本 - 修改路由配置支持按需加载页面对应的 JS 模块 - 路由切换时自动销毁旧组件实例以防止内存泄漏 - 更新文件引用路径适配新的目录结构 - 修复 rollup 配置中的语法问题及端口配置 - 移除无用的日志输出和冗余代码提升性能
99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
export class ScriptManager {
|
|
constructor() {
|
|
this._loadedClasses = new Map();
|
|
this.currentScriptEl = null;
|
|
this.currentModule = null;
|
|
this.currentName = null;
|
|
}
|
|
|
|
async loadScript({path, name, isModule = false, deps = []}) {
|
|
console.log('loadScript', name);
|
|
if (this._loadedClasses.has(name)) {
|
|
console.log(`Component ${name} loaded from cache`);
|
|
return this._loadedClasses.get(name);
|
|
}
|
|
|
|
for (const dep of deps) {
|
|
await this._appendScript({path: dep, isModule: false});
|
|
}
|
|
|
|
let componentReference = null;
|
|
|
|
console.log(isModule);
|
|
if (isModule) {
|
|
const module = await import(path);
|
|
this.currentModule = module;
|
|
componentReference = module;
|
|
} else {
|
|
await this._appendScript({path, isModule: false});
|
|
componentReference = window[name] || null;
|
|
}
|
|
|
|
if (componentReference) {
|
|
this._loadedClasses.set(name, componentReference);
|
|
}
|
|
|
|
this.currentName = name;
|
|
return componentReference;
|
|
}
|
|
|
|
async _appendScript({path, isModule}) {
|
|
const s = document.createElement('script');
|
|
s.src = path;
|
|
s.type = isModule ? 'module' : 'text/javascript';
|
|
s.async = false;
|
|
|
|
return new Promise((resolve, reject) => {
|
|
s.onload = () => {
|
|
this.currentScriptEl = s;
|
|
console.log(s);
|
|
resolve();
|
|
};
|
|
s.onerror = () => {
|
|
reject(new Error(`Failed to load script: ${path}`));
|
|
}
|
|
document.body.appendChild(s);
|
|
});
|
|
}
|
|
|
|
async unloadScript() {
|
|
console.log('unloadScript');
|
|
if (this.currentScriptEl) {
|
|
try {
|
|
this.currentScriptEl.remove();
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
this.currentModule = null;
|
|
this.currentName = null;
|
|
this.currentScriptEl = null;
|
|
}
|
|
|
|
async getComponentInstance(name) {
|
|
const ComponentClassReference = this._loadedClasses.get(name);
|
|
const BaseClassForCheck = window.BaseComponent;
|
|
|
|
if (!ComponentClassReference) {
|
|
console.error('ComponentClassReference not found');
|
|
return null
|
|
}
|
|
|
|
const ComponentClass = ComponentClassReference.default
|
|
|| ComponentClassReference;
|
|
|
|
if (typeof ComponentClass === 'function') {
|
|
if (!(ComponentClass.prototype instanceof BaseClassForCheck)) {
|
|
console.error(`Component ${name} does not inherit BaseComponent.`);
|
|
return null;
|
|
}
|
|
|
|
return new ComponentClass();
|
|
}
|
|
|
|
console.error(`Component ${name} does not exist`);
|
|
return null;
|
|
}
|
|
}
|