码迷,mamicode.com
首页 > 编程语言 > 详细

eval5: TypeScript编写的JavaScript解释器

时间:2020-04-04 20:46:39      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:turn   nstat   install   编写   timeout   需要   save   art   types   

eval5是基于TypeScript编写的JavaScript解释器,100%支持ES5语法。

项目地址:https://github.com/bplok20010/eval5

使用场景

  • 浏览器环境中需要使用沙盒环境执行JavaScript脚本
  • 控制代码执行时长
  • 不支持eval Function的JavaScript运行环境:如 微信小程序
  • 研究/学习用

安装

npm install --save eval5

使用

import { Interpreter } from ‘eval5‘;

const ctx = {
    console,
    hello(){
        console.log(‘hello eval5‘)
    }
}
var interpreter = new  Interpreter(ctx, {
    timeout: 1000
});

var result = interpreter.evaluate(`
    hello();
    function sum(a, b) {
        return a + b;
    }
    sum(100,2 00);
`)

console.log(result); // 300

eval5不支持es6语法,可以先将es6或typescript转成es5

原理

  1. eval5先将源码编译得到树状结构的抽象语法树(AST)。
    抽象语法树由不同的节点组成,每个节点的type标识着不同的语句或表达式,例如: 1+1的抽象语法树
    {
    "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"
    }
  2. 根据节点type编写不同的处理模块并得到最终结果。例如:根据1+1的语法树我们可以写出一下解释器代码:
    function handleBinaryExpression(node) {
    switch( node.operator ) {
        case ‘+‘:
            return node.left.value + node.right.value;
        case ‘-‘:
            return node.left.value - node.right.value;
    }
    }

技术图片

示例

在线体验

更多示例

以下是解析echarts4效果示例:
技术图片

eval5: TypeScript编写的JavaScript解释器

标签:turn   nstat   install   编写   timeout   需要   save   art   types   

原文地址:https://blog.51cto.com/7453775/2484869

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!