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

@@ -5,7 +5,7 @@ export class EventManager {
 
   add(ele, type, handler, options) {
     ele.addEventListener(type, handler, options);
-        this.listeners.push({ ele, type, handler, options });
+    this.listeners.push({ele, type, handler, options});
   }
 
   remove(ele, type, handler, options) {
@@ -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 = [];
+    });
   }
 }

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');
+    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 = [];
+    });
   }
 }

sidepanel/modules/Router.js

@@ -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) {
@@ -114,7 +111,7 @@ class Router {
     };
 
     if (this.beforeFun) {
-      this.beforeFun({ to: route, next: doChange });
+      this.beforeFun({to: route, next: doChange});
     } else {
       doChange().then(r => r);
     }
@@ -143,4 +140,4 @@ class Router {
   }
 }
 
-export { Router };
+export {Router};