element-ui table 组件等一些数据组件自定义render，存数据库方法如何快速转解码

在日常开发中，很多业务数据需求都是使用表格，列表去承载。开发人员首先想到的是制作各种公共组件。在开发中为了满足各种个性化自定义渲染，就会有这样的需求，把动态方法存到数据库，渲染时根据方法动态渲染数据。

这样问题来了，方法肯定不是直接往数据库里边存储，需要转成字符串，下次想改又要转回来，维护非常的麻烦。这就会想到要是有一个工具来做这个该多好呀。

源码下载预览

代码转String

const funStr = new Function('return ' + code)();
JSON.stringify(funStr.toString());

String转代码

eval(`var func = ${code}`);

new Function VS eval

• new Function 语法

let func = new Function ([arg1, arg2, ...argN], functionBody);

new Function()只接受字符串参数，其可选参数为方法的入参，必填参数为方法体内容。

• eval()

eval()具有可以解析表达式的特性，所以可以利用这一特性将字符串解析为一个函数。

• 使用注意

如果是一个完整的函数体，且其中函数体内未包含其他函数，那么可以使用new Function或eval来实现。

如果函数体内包含函数，那么包含的函数必须和被调用的函数位于同一作用域下。

如何保证调用函数和调用参数在统一作用域？有2种方案可以采取：

将变量和方法都声明到window对象上，那么任何地方皆可以调用，但是这样存在风险，如果存在和window对象内置属性同名的情况下，将覆盖内置属性的值。
将变量和方法作用域一个实例对象中。