feat: 动态加载js文件

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

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

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));
+//                 });
+//             }
+//         });
+//     });
+// }

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>