From 158ab8a311863d5ff2f75e22df8eb15fda91f47d Mon Sep 17 00:00:00 2001
From: lichaojun <lichaojun@cdqcp.com>
Date: Fri, 9 May 2025 04:51:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BDjs?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamicImport/dynamicModule/moduleA.js    | 20 +++++++++-
 .../dynamicImport/dynamicModule/moduleB.js    | 20 +++++++++-
 src/views/demo/dynamicImport/index.js         | 40 ++++++++++---------
 src/views/demo/dynamicImport/index.vue        | 28 ++++---------
 4 files changed, 64 insertions(+), 44 deletions(-)

diff --git a/src/views/demo/dynamicImport/dynamicModule/moduleA.js b/src/views/demo/dynamicImport/dynamicModule/moduleA.js
index 1315161..308587d 100644
--- a/src/views/demo/dynamicImport/dynamicModule/moduleA.js
+++ b/src/views/demo/dynamicImport/dynamicModule/moduleA.js
@@ -1,13 +1,29 @@
 const init = (params) => {
     console.log('moduleA init');
+    return {
+        name: 'ModuleA',
+        functionName: params.type,
+        otherParams: {
+            id: `xxxx${params.type}`,
+            age: `xxxx${params.type}`,
+        },
+    };
 };
 
 const getData = (params) => {
     console.log('moduleA getData');
+    return {
+        name: 'ModuleA',
+        functionName: params.type,
+        otherParams: {
+            id: `xxxx${params.type}`,
+            age: `xxxx${params.type}`,
+        },
+    };
 };
 
 export default function (params) {
-    console.log('moduleA');
-    console.log(params);
+    // console.log('moduleA');
+    // console.log(params);
     return eval(params.type + '(params)');
 }
diff --git a/src/views/demo/dynamicImport/dynamicModule/moduleB.js b/src/views/demo/dynamicImport/dynamicModule/moduleB.js
index d068de6..232c9ac 100644
--- a/src/views/demo/dynamicImport/dynamicModule/moduleB.js
+++ b/src/views/demo/dynamicImport/dynamicModule/moduleB.js
@@ -1,13 +1,29 @@
 const init = (params) => {
     console.log('moduleB init');
+    return {
+        name: 'moduleB',
+        functionName: params.type,
+        otherParams: {
+            id: `xxxx${params.type}`,
+            age: `xxxx${params.type}`,
+        },
+    };
 };
 
 const getData = (params) => {
     console.log('moduleB getData');
+    return {
+        name: 'moduleB',
+        functionName: params.type,
+        otherParams: {
+            id: `xxxx${params.type}`,
+            age: `xxxx${params.type}`,
+        },
+    };
 };
 
 export default function (params) {
-    console.log('moduleB');
-    console.log(params);
+    // console.log('moduleB');
+    // console.log(params);
     return eval(params.type + '(params)');
 }
diff --git a/src/views/demo/dynamicImport/index.js b/src/views/demo/dynamicImport/index.js
index 985738b..6110b05 100644
--- a/src/views/demo/dynamicImport/index.js
+++ b/src/views/demo/dynamicImport/index.js
@@ -1,22 +1,3 @@
-/**
- * webpack中使用方法
- * 参数一指定目录，参数二是否递归子文件夹，参数三匹配规则
- * const allModules = require.context('./dynamicModule', false, /\.js$/);
- */
-/** vite中使用 */
-const allModules = import.meta.glob('./dynamicModule/*.js');
-
-export default async function (moduleName, params) {
-    console.log(allModules);
-    for (const key in allModules) {
-        const regx = key.replace('./dynamicModule/', '').replace('.js', '');
-        if (regx === moduleName) {
-            let module = await allModules[key].default(params);
-            console.log(await module);
-        }
-    }
-}
-
 // vue2 实现
 // const allModules = require.context('./dynamicModule', false, /\.js$/);
 
@@ -32,3 +13,24 @@ export default async function (moduleName, params) {
 //         });
 //     });
 // }
+
+/**
+ * webpack中使用方法
+ * 参数一指定目录，参数二是否递归子文件夹，参数三匹配规则
+ * const allModules = require.context('./dynamicModule', false, /\.js$/);
+ */
+/** vite中使用 */
+const allModules = import.meta.glob('./dynamicModule/*.js');
+
+export default async function (moduleName, params) {
+    console.log('所有可以动态加载的js模块', allModules);
+    for (const key in allModules) {
+        const regx = key.replace('./dynamicModule/', '').replace('.js', '');
+        if (regx === moduleName) {
+            let module = await allModules[key]();
+            console.log('异步加载成功之后的module', module);
+            let res = module.default(params);
+            return res;
+        }
+    }
+}
diff --git a/src/views/demo/dynamicImport/index.vue b/src/views/demo/dynamicImport/index.vue
index c548dd7..6c19c63 100644
--- a/src/views/demo/dynamicImport/index.vue
+++ b/src/views/demo/dynamicImport/index.vue
@@ -11,28 +11,14 @@ defineOptions({
 });
 
 onMounted(() => {
-    console.log(dynamicImportModule('moduleA', { name: 'dynamicModuleA', type: 'init' }));
-});
-
-const handleSymbolObject = () => {
-    const sym = Symbol('dynamicModuleA');
-    const obj = {
-        [sym]: 'dynamicModuleA',
-    };
-
-    /**
-     * 获取对象的属性为Symbol类型方法
-     * 错误写法:
-     * for (const key in obj) {
-     *     console.log(obj[key]);
-     * }
-     */
-    const keys = Reflect.ownKeys(obj);
-    console.log(keys);
-    keys.forEach((key) => {
-        console.log(obj[key]);
+    dynamicImportModule('moduleA', { name: 'dynamicModuleA', type: 'init' }).then((res) => {
+        console.log('拿到异步加载成功之后的返回结果', res);
     });
-};
+
+    // dynamicImportModule('moduleA', { name: 'dynamicModuleA', type: 'getData' }).then((res) => {
+    //     console.log('拿到异步加载成功之后的返回结果', res);
+    // });
+});
 </script>
 
 <style lang="scss" scoped></style>