前端与编译原理 用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的开源项目,可以参考源码中的注释,也可以看大神们的文章