From 31e99ef96e47356be84582b0d356e17531243d41 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 8 May 2025 17:48:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BDjs?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dynamicImport/dynamicModule/moduleA.js    | 13 +++++++
 .../dynamicImport/dynamicModule/moduleB.js    | 13 +++++++
 src/views/demo/dynamicImport/index.js         | 34 +++++++++++++++++
 src/views/demo/dynamicImport/index.vue        | 38 +++++++++++++++++++
 4 files changed, 98 insertions(+)
 create mode 100644 src/views/demo/dynamicImport/dynamicModule/moduleA.js
 create mode 100644 src/views/demo/dynamicImport/dynamicModule/moduleB.js
 create mode 100644 src/views/demo/dynamicImport/index.js
 create mode 100644 src/views/demo/dynamicImport/index.vue

diff --git a/src/views/demo/dynamicImport/dynamicModule/moduleA.js b/src/views/demo/dynamicImport/dynamicModule/moduleA.js
new file mode 100644
index 0000000..1315161
--- /dev/null
+++ b/src/views/demo/dynamicImport/dynamicModule/moduleA.js
@@ -0,0 +1,13 @@
+const init = (params) => {
+    console.log('moduleA init');
+};
+
+const getData = (params) => {
+    console.log('moduleA getData');
+};
+
+export default function (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
new file mode 100644
index 0000000..d068de6
--- /dev/null
+++ b/src/views/demo/dynamicImport/dynamicModule/moduleB.js
@@ -0,0 +1,13 @@
+const init = (params) => {
+    console.log('moduleB init');
+};
+
+const getData = (params) => {
+    console.log('moduleB getData');
+};
+
+export default function (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
new file mode 100644
index 0000000..985738b
--- /dev/null
+++ b/src/views/demo/dynamicImport/index.js
@@ -0,0 +1,34 @@
+/**
+ * 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$/);
+
+// export default function (moduleName, params) {
+//     return new Promise((resolve, reject) => {
+//         allModules.keys().forEach((key) => {
+//             const regx = key.replace('./dynamicModule/', '').replace('.js', '');
+//             if (regx === moduleName) {
+//                 allModules(key).then((module) => {
+//                     resolve(module.default(params));
+//                 });
+//             }
+//         });
+//     });
+// }
diff --git a/src/views/demo/dynamicImport/index.vue b/src/views/demo/dynamicImport/index.vue
new file mode 100644
index 0000000..c548dd7
--- /dev/null
+++ b/src/views/demo/dynamicImport/index.vue
@@ -0,0 +1,38 @@
+<template>
+    <el-card> 动态导入js模块示例 </el-card>
+</template>
+
+<script setup lang="jsx">
+import { onMounted } from 'vue';
+import dynamicImportModule from './index.js';
+
+defineOptions({
+    name: 'DynamicImport',
+});
+
+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]);
+    });
+};
+</script>
+
+<style lang="scss" scoped></style>