前端与编译原理 用 js 去运行 js 代码 js2run

===
前端与编译原理似乎相隔甚远, 各种热门的框架都学不过来, 那能顾及到这么多底层呢, 前端开发者们似乎对编译原理的影响仅仅是 ”抽象语法树“, 但这只是个开头而已, 我们的目的是利用 js 直接运行 js 代码

项目地址
安装及使用方法

写这个干嘛, 有现成的 eval 不香么

接触过微信小程序开发的同学或许知道, 小程序为运行环境禁止 new Function,eval,setTimeout 等方法的使用, 限制了我们执行字符串形式的动态代码, 其他小程序平台对此也有诸多限制, 但是解析器毕竟也就是那么回事, 可以写一个解析器, 让 Js 自己去运行自己

编译器和解释器

编译器负责代码转化成语法树, 代码经过编译器的词法分析, 语法分析等阶段过后, 会生成一个树状结构的 抽象语法树 (AST), 里面详尽的描述了代码类型, 开始结束位置等信息, 感兴趣的同学可以在这个 AST Explorer 网站自行体验
到了 AST 阶段代码还不能够运行, 但是 AST 详细的记录了代码的语义化信息, 所以 Babel,Webpack,Sass,Less,Prettier 等工具可以进行各种处理, 能够把 AST 翻译成目标语言并运行的工具叫做 ” 解释器 ”

关于编译器已经有现成的 Babel,acron 供我们选择, 他们都较为成熟, 选哪个都没错, 看喜好, 由于解释本事干的事情就是, 写了什么代码, 就按照什么代码去执行, 比如有一段代码 var a = 1, 那就在执行环境里创建一个变量 a 并赋值 1, 接下的一行是a += 10 那就在执行环境里把这个变量 a 给他加上 100, 这个执行环境可以是一个对象, 每次声明变量或者执行操作, 都是在对对象进行操作, 当操作结束的时候, 释放掉变量即可, 不会对执行环境以外的代码有影响, 由于是 js 去运行 js,new 关键字,this, 循环, 以及对象的方法等都不需要有太多的改动, 可以让 js 解释器的实现变得非常简单

后续

在写解释器的时候, 需要考虑关键字判断, 标识符节点处理, 字符节点, 表达式, 块级声明, 函数定义, 函数表达式,this,new, 循环,if 等各种代码的处理, 在这里就不一一详尽的去描述了, 源码参考了 @jrainlau 大神的代码, 至于生产环境的使用也可以参考 @axetroy 的开源项目, 可以参考源码中的注释, 也可以看大神们的文章

感谢以下成员
@jrainlau
@axetroy 这位大神的 runjs 更成熟一些, 如果项目需要可以参考这个