# 前端与编译原理 用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的更多相关文章

  1. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  2. 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言,比如TypeScript

    常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...

  3. 编译原理 #01# 简易词法分析器(js实现)

    // 实验存档 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. 前端编译原理 简述-jison

    最近几年的项目技术难点都和编译原理,抽象语法树,代码编辑器 有关系.现在时间有点空,先从基础了解起来,让有些交互和提示能够更智能些. 编译原理-Parser    编译原理 其实就是 让计算机懂的 “ ...

  5. Sea.Js的运行原理(转)

    1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...

  6. 揭秘autoit3的运行机制和反编译原理

    今天发这个帖子的目的在于和论坛里面的朋友交流一下学习心得,主要内容是围绕着autoit3的编译原理.先开门见山的说一下结果,我不知道如何反编译au3,但相信论坛有很多高手,能解开我心中的疑团.我没有想 ...

  7. js编译原理(你不知道的javascript)

    虽然通常将js归类为"动态"或"解释执行"语言,但其实也可把它看成是一门编译语言.只不过这个所谓的编译与传统的编译语言不同,它不是提前编译的,编译结果也不能在分 ...

  8. 前端开发环境之GRUNT自动WATCH压缩JS文件与编译SASS文件环境下Ruby安装sass常见错误分析

    前言: 1.sass编译为css文件,早先时刻写css,后来看了sass挺不错的,于是在新的项目中开始使用上了sass.(grunt需要ruby环境,所以需要先安装ruby,sass环境) ①安装ru ...

  9. webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

    读这篇文章的朋友,请确保对webpack有最基础的认识. 您可以阅读我前一篇文章:Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目.https://www.to ...

随机推荐

  1. Codeforces Round #603 (Div. 2) A. Sweet Problem(数学)

    链接: https://codeforces.com/contest/1263/problem/A 题意: You have three piles of candies: red, green an ...

  2. python3.7 win10配置opencv和扩展库

  3. [Algorithm] 242. Valid Anagram

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  4. MongoDB db.stats()&&db.db.serverStatus()

    db.stats()   示例图 参数解释: "db" : "test" ,表示当前是针对"test"这个数据库的描述.想要查看其他数据库, ...

  5. ent 基本使用五 schema介绍

    ent 提供了自动生成schema 但是,我们可以基于生成schema 进行扩展,schema 主要包含以下配置 实体的字段(或者属性)比如 user 的name 以及age 实体的边(关系),比如u ...

  6. flag&to do list&note

    没错,今天我要立几个看起来可能会倒的 flag 今天白天 早上除非有特殊情况,不许再看我的博客.不许再看我的qq空间.不许再跟别人聊闲话!!!☑已达成 今天早上一定要坚持做题,把昨天问老师的问题搞懂, ...

  7. Content-type解析

    一.是什么? 是Http的实体首部字段,用于说明请求或返回的消息主体是用何种方式编码,在request header和response header里都存在. Content-Type(内容类型),一 ...

  8. 联想M7216NWA墨粉清零:

    在设备就绪状态下,按"功能"键,进入设置菜单,按上下键进行选择,屏幕出现"设备信息"项时按"确认"键,再按上下键选择,当屏幕出现" ...

  9. Excel填坑[0]

    Excel填坑[0] 本着一天水一贴的原则(放p),我又来填坑了.今天做一个很简单的排队图,虽然不难,但因为手机显示问题折腾了半天.感觉做图做表格不仅仅是靠技术,更重要的是思维. 就是这张图,看起来平 ...

  10. Java finally未被执行的情况

    一种是先执行了用于终止程序的System.exit()方法,或进程被关闭 还有一种情况是,当前线程一直在执行,在一些业务逻辑里面跳不出来,看上去就像finally一直未被执行 线程被终止的时候也会执行 ...