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

1. 修改卸载timer、event、script的逻辑
2. 修改加载script的逻辑

sidepanel/js/components/BaseComponet.js

@@ -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');
   }
 }

sidepanel/js/utils/eventManager.js

@@ -1,32 +1,41 @@
-export class EventManager { 
-    constructor() {
-        this.listeners = [];
-    }
+export class EventManager {
+  constructor() {
+    this.listeners = [];
+  }
 
-    add(ele, type, handler, options) {
-        ele.addEventListener(type, handler, options);
-        this.listeners.push({ ele, type, handler, options });
-    }
+  add(ele, type, handler, options) {
+    ele.addEventListener(type, handler, options);
+    this.listeners.push({ele, type, handler, options});
+  }
 
-    remove(ele, type, handler, options) {
-        ele.removeEventListener(type, handler, options);
-        this.listeners = this.listeners.filter(
-            (listener) =>
-                listener.ele !== ele ||
-                listener.type !== type ||
-                listener.handler !== handler ||
-                listener.options !== options
-        );
-    }
+  remove(ele, type, handler, options) {
+    ele.removeEventListener(type, handler, options);
+    this.listeners = this.listeners.filter(
+      (listener) =>
+        listener.ele !== ele ||
+        listener.type !== type ||
+        listener.handler !== handler ||
+        listener.options !== options
+    );
+  }
 
-    removeAll() {
+  removeAll() {
+    return new Promise((resolve, reject) => {
+      this.listeners.onload = () => {
         this.listeners.forEach((listener) => {
-            listener.ele.removeEventListener(
-                listener.type,
-                listener.handler,
-                listener.options
-            );
+          listener.ele.removeEventListener(
+            listener.type,
+            listener.handler,
+            listener.options
+          );
         });
-        this.listeners = [];
-    }
+        resolve();
+      };
+      this.listeners.onerror = () => {
+        console.error('unload event error');
+        reject();
+      };
+      this.listeners = [];
+    });
+  }
 }

sidepanel/js/utils/scriptManager.js

@@ -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();

sidepanel/js/utils/timerManager.js

@@ -45,11 +45,19 @@ export class TimerManager {
   }
 
   cleanAll() {
-    console.log('cleanAll time or interval');
-    this.timers.forEach((timerId) => {
-      window.clearTimeout(timerId);
-      window.clearInterval(timerId);
+    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 = [];
     });
-    this.timers = [];
   }
 }