feat(router): 增强路由组件加载逻辑
1. 修改卸载timer、event、script的逻辑 2. 修改加载script的逻辑
This commit is contained in:
@@ -58,9 +58,9 @@ export class BaseComponent {
|
|||||||
* 销毁组件
|
* 销毁组件
|
||||||
*/
|
*/
|
||||||
destroy() {
|
destroy() {
|
||||||
this._eventManager.removeAll();
|
this._eventManager.removeAll().then(() => console.log('clean event successful'));
|
||||||
this._timerManager.cleanAll();
|
this._timerManager.cleanAll().then(() => console.log('clean timer successful'));
|
||||||
this._scriptManager.unloadScript().then(r => console.log(r));
|
this._scriptManager.unloadScript().then(r => console.log('unload script successful'));
|
||||||
console.log('destroy success');
|
console.log('destroy success');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -20,6 +20,8 @@ export class EventManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
removeAll() {
|
removeAll() {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
this.listeners.onload = () => {
|
||||||
this.listeners.forEach((listener) => {
|
this.listeners.forEach((listener) => {
|
||||||
listener.ele.removeEventListener(
|
listener.ele.removeEventListener(
|
||||||
listener.type,
|
listener.type,
|
||||||
@@ -27,6 +29,13 @@ export class EventManager {
|
|||||||
listener.options
|
listener.options
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
this.listeners.onerror = () => {
|
||||||
|
console.error('unload event error');
|
||||||
|
reject();
|
||||||
|
};
|
||||||
this.listeners = [];
|
this.listeners = [];
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -51,13 +51,12 @@ export class ScriptManager {
|
|||||||
};
|
};
|
||||||
s.onerror = () => {
|
s.onerror = () => {
|
||||||
reject(new Error(`Failed to load script: ${path}`));
|
reject(new Error(`Failed to load script: ${path}`));
|
||||||
}
|
};
|
||||||
document.body.appendChild(s);
|
document.body.appendChild(s);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
async unloadScript() {
|
async unloadScript() {
|
||||||
console.log('unloadScript');
|
|
||||||
if (this.currentScriptEl) {
|
if (this.currentScriptEl) {
|
||||||
try {
|
try {
|
||||||
this.currentScriptEl.remove();
|
this.currentScriptEl.remove();
|
||||||
|
|||||||
@@ -45,11 +45,19 @@ export class TimerManager {
|
|||||||
}
|
}
|
||||||
|
|
||||||
cleanAll() {
|
cleanAll() {
|
||||||
console.log('cleanAll time or interval');
|
return new Promise((resolve, reject) => {
|
||||||
|
this.timers.onload = () => {
|
||||||
this.timers.forEach((timerId) => {
|
this.timers.forEach((timerId) => {
|
||||||
window.clearTimeout(timerId);
|
window.clearTimeout(timerId);
|
||||||
window.clearInterval(timerId);
|
window.clearInterval(timerId);
|
||||||
});
|
});
|
||||||
|
resolve();
|
||||||
|
};
|
||||||
|
this.timers.onerror = () => {
|
||||||
|
console.log('unload timer error');
|
||||||
|
reject();
|
||||||
|
}
|
||||||
this.timers = [];
|
this.timers = [];
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,21 +85,18 @@ class Router {
|
|||||||
}
|
}
|
||||||
|
|
||||||
console.log('加载组件', route.name);
|
console.log('加载组件', route.name);
|
||||||
console.log(route.script);
|
|
||||||
if (route.script) {
|
if (!route.script) {
|
||||||
const tmp = await this.scriptManager.loadScript({
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await this.scriptManager.loadScript({
|
||||||
path: route.script,
|
path: route.script,
|
||||||
name: route.name,
|
name: route.name,
|
||||||
isModule: route.isModule,
|
isModule: route.isModule,
|
||||||
deps: route.deps,
|
deps: route.deps,
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(tmp);
|
|
||||||
if (tmp) {
|
|
||||||
console.log('加载组件成功', route.name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const newInstance = await this.scriptManager.getComponentInstance(route.name);
|
const newInstance = await this.scriptManager.getComponentInstance(route.name);
|
||||||
console.log(newInstance);
|
console.log(newInstance);
|
||||||
if (newInstance) {
|
if (newInstance) {
|
||||||
|
|||||||
Reference in New Issue
Block a user