小程序eval/Function终极替代方案:eval5
发布于 5 年前 作者 qiangli 904 次浏览 来自 分享
由于小程序内部禁用了eval、Function导致在一些场景下无法动态执行脚本,小程序又只支持JavaScript开发,如果想要在在前端动态执行脚本就得实现对于的脚本解释器。


eval5解释器完全由JavaScript语言编写,支持ECMA5语法。eval5


实现原理:

  1. 使用acorn或esprima编译器对JavaScript代码进行编译并得到抽象语法树(AST)
  2. 用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地址

回到顶部