小程序eval/Function终极替代方案:eval5
由于小程序内部禁用了eval、Function导致在一些场景下无法动态执行脚本,小程序又只支持JavaScript开发,如果想要在在前端动态执行脚本就得实现对于的脚本解释器。
eval5解释器完全由JavaScript语言编写,支持ECMA5语法。eval5
实现原理:
- 使用acorn或esprima编译器对JavaScript代码进行编译并得到抽象语法树(AST)
- 用JavaScript解析语法树并得到计算结果
例如:1+1的解析
一、使用acorn编译后得到的语法树,语法树由不同的节点组成各个节点的type代表着不同的语句或表达式类型:
{
"type": "Program",
"body": [
{
"type": "ExpressionStatement",
"expression": {
"type": "BinaryExpression",
"operator": "+",
"left": {
"type": "Literal",
"value": 1,
"raw": "1"
},
"right": {
"type": "Literal",
"value": 1,
"raw": "1"
}
}
}
],
"sourceType": "script"
}
二、得到语法树后,我们可以根据不同的节点类型实现不同的处理函数,例如:
function handleBinaryExpression(node) {
switch( node.operator ) {
case '+':
return node.left.value + node.right.value;
case '-':
return node.left.value - node.right.value;
}
}
如何使用
一、使用npm安装:
npm install --save eval5
二、使用打包好的eval5.js
使用示例:
// npm install --save eval5
import {Function,evaluate} from 'eval5'; //or 'path/eval5.js'
const sum = new Function('a', 'b', 'return a+b');
sum(100,200)
evaluate('1+1')
eval5基于小程序编写的示例:eval5-wx-demo github地址