javascript编写一个简单的编译器

javascript编写一个简单的编译器(理解抽象语法树AST)

编译器

是一种接收一段代码，然后把它转成一些其他一种机制。

我们现在来做一个在一张纸上画出一条线，那么我们画出一条线需要定义的条件如下：

使用

Paper定义纸的颜色，Pen定义笔的颜色，Line指画出一条线，100指在颜色参数中代表100%的黑色 或 css中的rgb(0%,0%,0%). 那么生成的线使用灰色来表示，那么就是 50了，纸的面积是 100*100， 线条的宽度是1，线段的起点和终点是相对于左下角的x,y坐标来定义。

Paper 0 (含义是: 定义纸的颜色是白色)
Pen 100 (含义是: 定义笔的颜色是黑色)
Line 0 50 100 50 (含义是：x轴0到100，说明是横向从起点到终点，y轴是50到50，说明是一张纸的中点是一条直线)。

那么编译器是如何工作的？

编译器一般会经过如下几个步骤：

1. 词法分析
2. 语法分析
3. 转换
4. 代码生成

1-1 词法分析(也可以叫做标记)

词法分析将每个关键字

(也可以叫标记)使用空格分开. 比如：

Paper 0
Pen 100
Line 0 50 100 50

如上，我们可以把

Paper， Pen，Line 的类型统一可以叫 word, 值就是各个单词了 那么 后面的数字类型我们可以统一叫 number；

比如我们输入

"Paper 0", 那么我们输出的话就变成如下：

[

{type: "word", value: "Paper"},

{type: "number", value: "100"}

]

代码如下：

function lexical (code) {

return code.split(/\s+/)

.filter(function(t) {

return t.length > 0

}).map(function(t) {

console.log(t);

return isNaN(t) ? {type: 'word', value: t} : {type: 'number', value: t}

});

}var res = lexical("Paper 0");

console.log(res); // [{type: "word", value: "Paper"}, {type: "number", value: '100'}]

想要学习前端开发的同学，可以加群：

543627393 学习哦！