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 學習哦！