# 前端与编译原理 用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更成熟一些,如果项目需要可以参考这个
前端与编译原理 用js去运行js代码 js2run的更多相关文章
-
前端与编译原理——用JS写一个JS解释器
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...
-
0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript
常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
-
编译原理 #01# 简易词法分析器(js实现)
// 实验存档 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
-
前端编译原理 简述-jison
最近几年的项目技术难点都和编译原理,抽象语法树,代码编辑器 有关系.现在时间有点空,先从基础了解起来,让有些交互和提示能够更智能些. 编译原理-Parser 编译原理 其实就是 让计算机懂的 “ ...
-
Sea.Js的运行原理(转)
1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...
-
揭秘autoit3的运行机制和反编译原理
今天发这个帖子的目的在于和论坛里面的朋友交流一下学习心得,主要内容是围绕着autoit3的编译原理.先开门见山的说一下结果,我不知道如何反编译au3,但相信论坛有很多高手,能解开我心中的疑团.我没有想 ...
-
js编译原理(你不知道的javascript)
虽然通常将js归类为"动态"或"解释执行"语言,但其实也可把它看成是一门编译语言.只不过这个所谓的编译与传统的编译语言不同,它不是提前编译的,编译结果也不能在分 ...
-
前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析
前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...
-
webpack最简单的入门教程里bundle.js之运行单步调试的原理解析
读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...
随机推荐
-
【WCF】基于WCF的在线升级
一.前言 前不久因公司产品需要完成了在线升级功能,因为编程技术不精,不敢冒然采用Socket方法实现在线升级,所以使用比较方便稳妥的WCF方式 如果考虑并发能力的话还是Socket> ...
-
Activity系列讲解---返回结果的处理
设想一下:由当前Activity跳转到其它Activity,从其它Activity再返回到当前Activity时,如何获取其它Activity存放的数据?下面用一个例子讲解, 点击selsect按钮跳 ...
-
WPF Popup 控件导致被遮挡内容不刷新的原因
WPF Popup 控件导致被遮挡内容不刷新的原因 周银辉 今天在写一个WPF控件时用到了Popup控件,很郁闷的情况是:当popup关闭时,原来被popup挡住的界面部分不刷新,非要手动刷新一下(比 ...
-
大数据存储:MongoDB实战指南——常见问题解答
锁粒度与并发性能怎么样? 数据库的读写并发性能与锁的粒度息息相关,不管是读操作还是写操作开始运行时,都会请求相应的锁资源,如果请求不到,操作就会被阻塞.读操作请求的是读锁,能够与其它读操作共享,但是当 ...
- 在Windows Server 下安装 Oracle 11G 的一般步骤
-
虚反矩阵指令pinv之应用
pinv指令 在多数解的例子中,有时并不是仅要将其中一变数设定为零之解.为使整个系统得到最佳化,亦可利用pinv指令求得最小模组之合理解.pinv(A)又称为虚反矩阵(pseudoinvers ...
-
qwt6在Windows下Qt5的编译,安装,初步使用
今晚把qwt的编译,安装,初级使用放上来,以便需要的人,能更快部署好编程环境,不至于每次都像我这样花很多时间. 注意:Qtcreater使用的是什么编译器编译出来的,就要用那个编译器来编译qwt. 我 ...
-
C#基础学习心得(二)
索引器 class Program { static void Main(string[] args) { Employee e1 = new Employee(); e1[0] = "三& ...
-
FM(Factorization Machines)模型详解
优点 FM模型可以在非常稀疏的数据中进行合理的参数估计,而SVM做不到这点 在FM模型的复杂度是线性的,优化效果很好,而且不需要像SVM一样依赖于支持向量. FM是一个通用模型,它可以用于任何特征为实 ...
-
mui单选和多选框
具体见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> <ti ...