feat(router): 增强路由组件加载逻辑

1. 修改卸载timer、event、script的逻辑
2. 修改加载script的逻辑
This commit is contained in:
雨霖铃
2025-12-14 09:11:52 +08:00
parent 18ea3e0c8b
commit 52f6dcce3d
5 changed files with 63 additions and 50 deletions
+3 -3
View File
@@ -58,9 +58,9 @@ export class BaseComponent {
* 销毁组件
*/
destroy() {
this._eventManager.removeAll();
this._timerManager.cleanAll();
this._scriptManager.unloadScript().then(r => console.log(r));
this._eventManager.removeAll().then(() => console.log('clean event successful'));
this._timerManager.cleanAll().then(() => console.log('clean timer successful'));
this._scriptManager.unloadScript().then(r => console.log('unload script successful'));
console.log('destroy success');
}
}
+9
View File
@@ -20,6 +20,8 @@ export class EventManager {
}
removeAll() {
return new Promise((resolve, reject) => {
this.listeners.onload = () => {
this.listeners.forEach((listener) => {
listener.ele.removeEventListener(
listener.type,
@@ -27,6 +29,13 @@ export class EventManager {
listener.options
);
});
resolve();
};
this.listeners.onerror = () => {
console.error('unload event error');
reject();
};
this.listeners = [];
});
}
}
+1 -2
View File
@@ -51,13 +51,12 @@ export class ScriptManager {
};
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();
+9 -1
View File
@@ -45,11 +45,19 @@ export class TimerManager {
}
cleanAll() {
console.log('cleanAll time or interval');
return new Promise((resolve, reject) => {
this.timers.onload = () => {
this.timers.forEach((timerId) => {
window.clearTimeout(timerId);
window.clearInterval(timerId);
});
resolve();
};
this.timers.onerror = () => {
console.log('unload timer error');
reject();
}
this.timers = [];
});
}
}
+6 -9
View File
@@ -85,21 +85,18 @@ class Router {
}
console.log('加载组件', route.name);
console.log(route.script);
if (route.script) {
const tmp = await this.scriptManager.loadScript({
if (!route.script) {
return;
}
await this.scriptManager.loadScript({
path: route.script,
name: route.name,
isModule: route.isModule,
deps: route.deps,
});
console.log(tmp);
if (tmp) {
console.log('加载组件成功', route.name);
}
}
const newInstance = await this.scriptManager.getComponentInstance(route.name);
console.log(newInstance);
if (newInstance) {