前端vue 动态加载ts文件,动态调用ts内的方法

业务场景: 在某个业务场景中, 我们需要在数据库配置ts文件路径,和需要调用的函数名称, 前端需要再指定的场景下,触发对应的函数, 并执行处理逻辑,返回结果.

实现: 这是一个数据库配置生成的动态表单 + 动态校验的例子, 需要引用动态的函数校验

任意一个js文件,
common1.ts

const funcation1 = ({value, formParam}) =>{
	console.log('我进来了1',value,formParam);
	// todo: 特殊逻辑处理
	return '我出去了';
}
const funcation2 = ({value, formParam}) =>{
	console.log('我进来了2',value,formParam);
	// todo: 特殊逻辑处理
	return '我出去了';
}

export {
funcation1,
funcation2
}

在需要调用的位置, 加入如下代码.
main.vue

<script>
	/**
		动态调用函数
	*/
	const loadAndCallFunction = async(modelPath, funcionName, param) =>{
		try{
			// 动态导入模块
			const module = await import(`./${modelPath}`);
			// 检查模块是否包含指定的函数
			if(typeof module[funcionName] === 'function') {
				// 调用函数并返回结果
				return module[funcionName](param);
			}
			throw new Error(`Function ${funcionName} not found In module ${modelPath}`)
		}catch(error) {
			throw error
		}
	}
	
	const rules = reactive<any>({});
	// 根据后端配置,动态渲染表单rules
	const initRule = (formItems) =>{
		formItems.map((item)=>{
		  rules[item.field] =  item.rule !== undefined ? item.rule : [{required:false}];
		  if(item.validator !== undefined) {
				const validator = {
				validator: async (value, cb)=>{
					 //const result:any = await loadAndCallFunction(item.path, item.function, {value, formValue})
					 const result:any = await loadAndCallFunction('validator/common/common1', 'function1', {value, formValue});
					 if(result === '' || result === undefined){
						cb();
					} else {
						cb(result);
					}
				}
				}	
		  }
		})
	}
</script>