feat: 动态加载js模块

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('moduleA');
-    console.log(params);
+    // console.log(params);
     return eval(params.type + '(params)');
 }

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('moduleB');
-    console.log(params);
+    // console.log(params);
     return eval(params.type + '(params)');
 }

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

src/views/demo/dynamicImport/index.vue

@@ -11,28 +11,14 @@ defineOptions({
 });
 
 onMounted(() => {
-    console.log(dynamicImportModule('moduleA', { name: 'dynamicModuleA', type: 'init' }));
+    dynamicImportModule('moduleA', { name: 'dynamicModuleA', type: 'init' }).then((res) => {
+        console.log('拿到异步加载成功之后的返回结果', res);
     });
 
-const handleSymbolObject = () => {
+    // dynamicImportModule('moduleA', { name: 'dynamicModuleA', type: 'getData' }).then((res) => {
-    const sym = Symbol('dynamicModuleA');
+    //     console.log('拿到异步加载成功之后的返回结果', res);
-    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>