前端执行 input / textarea 输入的 js 代码

说明

前端可能会碰到这样的需求：在输入/输出数据结构不确定的情况下，需要在前端使用特定的脚本去做一些整理工作。

整体需求可拆分为两部分：

• 系统中提供某些数据，供用户使用
• 用户根据系统中提供的数据来编写脚本

这就需要我们在开发的时候除了能执行脚本，还需要让写脚本的人用到系统提供的参数。

最终效果

借助 js-execute 插件来实现，此插件主要用于执行用户输入的脚本。

代码在一个沙箱内执行，此插件只返回代码的执行结果

使用效果如下：

代码示例

完整代码可见： 点击跳转
npm： npm

引入/并创建实例

import JSRunner from 'js-execute';

// 创建实例
const runner = new JSRunner(({code, data}) => {
  console.log('runner result = ', data)
});

执行 用户 输入的代码

// 执行代码
let userInputCode = `
	function getName() {
		return this.name
	}
	return getName();	// 'hello world'
`
let props = { name: 'hello world' } // 自定义传入的参数
// 执行代码
runner.execute(userInputCode, props) 

关于代码执行错误的捕获

插件内只能捕获代码执行过程中产生的异常，可以根据code来判断 0: 正常 1: 异常
而类似于 输入的代码结构异常 这类问题，无法在插件内部捕获，只能通过外部来验证格式是否正确，例如使用 monaco-editor 的语法校验