自制前端框架 Day2.生成抽象語法樹

事后總結(jié)予颤,通過今天的代碼學到的:

  1. 鞏固了對責任鏈模式的認識囤官。
  2. 實際寫了一個生成AST的類:對于處理不同類型的節(jié)點要有不同的方法。

上一次既然已經(jīng)可以通過詞法分析器獲得token了蛤虐,今天打算用這些token生成一個抽象語法樹党饮,也就是AST。AST的根節(jié)點格式是這樣的:

{
    "type": "Program",
    "body": [這里面是樹的分支]
}

這個格式不是我信口胡謅的驳庭,看了幾個編譯原理相關的書刑顺,他們的根節(jié)點都是這個格式,在線js語法編譯器編譯出來的也是這個格式:在線編譯器生成出來的例子饲常。
因為之前的詞法分析器只能分析出一個單獨的數(shù)字蹲堂,比如是42。需要一提的是不皆,像42這種數(shù)字贯城,或者"hello"這種字符串,節(jié)點的type都是Literal霹娄。Literal的英文意思是:準確的能犯。大概意思就是這種字面量寫出來是啥那就是啥。所以這次試圖生成的目標AST結(jié)構(gòu)應該是這樣:

{
    "type": "Program",
    "body":{
        "type":"Literal",
        "value":42
    }
}

為了生成這么一個樹犬耻,需要一個ASTBuilder對象踩晶。這個對象有一個ast方法,用于生成樹枕磁。

function ASTBuilder(){
}
ASTBuilder.prototype.ast=function(){
}

如何組合Lexer和ASTBuilder這兩個類渡蜻,之前是想讓ASTBuilder接收一個tokns數(shù)組作為參數(shù),然后運行ast方法计济。但是這樣的話感覺太面向過程了茸苇。所以借鑒了責任鏈設計模式,讓ASTBuilder接收一個Lexer對象作為參數(shù)沦寂,形象點說就是:ASTBuilder對象身上有一個插槽学密,插著一個Lexer,當我按下ASTBuilder的ast按鈕時传藏,ASTBuilder會調(diào)用自己插槽上的Lexer來分析一個表達式腻暮,代碼是這樣的:

function ASTBuilder(lexer){
  this.lexer=lexer;
}
ASTBuilder.prototype.ast=function(expression){ 
}

因為AST的節(jié)點有很多種,所以要用不同的方法來生成不同類型的節(jié)點毯侦,比如哭靖,根節(jié)點用program方法生成,常量型節(jié)點用constant方法生成侈离。

function ASTBuilder(lexer){
  this.lexer=lexer;
}
ASTBuilder.Program="program";
ASTBuilder.Literal="Literal";
ASTBuilder.prototype.ast=function(expression){
  this.tokens = this.lexer.lex(expression);
  return this.program();
}
ASTBuilder.prototype.program=function(){
  return {
    type:ASTBuilder.Program,
    body:this.constant()
  }
}
ASTBuilder.prototype.constant = function () {
  return {
    type:ASTBuilder.Literal,
    value:this.tokens[0].value
  }
};

這樣就足夠產(chǎn)生一個最簡單的抽象語法樹了试幽。不過現(xiàn)在很明顯的問題是ASTBuilder.prototype.constant這個方法返回的是一個寫死的值value:this.tokens[0].value。不過這個先不考慮霍狰,現(xiàn)在的目標是寫一個完整的流程出來抡草。等以后慢慢迭代饰及。
現(xiàn)在看一下測試案例能否通過:

describe('AST構(gòu)建類',function(){
  it('ASTBuilder函數(shù)存在',function(){
    expect(ASTBuilder).toBeDefined();
  })
  it('可以生成一個符合預期的AST',function(){
    var lexer = new Lexer();
    var astBuilder= new ASTBuilder(lexer);
    var ast = astBuilder.ast('42');
    expect(ast.type).toBe('program');
    expect(ast.body.value).toBe(42);
  })
})
測試結(jié)果

測試結(jié)果通過。美滋滋康震。
感悟:這兩天從0開始寫這個框架燎含,自己動腦動手,感覺對很多東西都有了新的認識腿短,看來寫程序真的是要勤動手屏箍,光看書是不夠的。寫程序就像健身橘忱,要保持經(jīng)常寫赴魁,經(jīng)常想,堅持久了钝诚,水平自然就上來了颖御。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市凝颇,隨后出現(xiàn)的幾起案子潘拱,更是在濱河造成了極大的恐慌,老刑警劉巖拧略,帶你破解...
    沈念sama閱讀 212,542評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件芦岂,死亡現(xiàn)場離奇詭異,居然都是意外死亡垫蛆,警方通過查閱死者的電腦和手機禽最,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,596評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來袱饭,“玉大人川无,你說我怎么就攤上這事÷枪裕” “怎么了舀透?”我有些...
    開封第一講書人閱讀 158,021評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長决左。 經(jīng)常有香客問我,道長走贪,這世上最難降的妖魔是什么佛猛? 我笑而不...
    開封第一講書人閱讀 56,682評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮坠狡,結(jié)果婚禮上继找,老公的妹妹穿的比我還像新娘。我一直安慰自己逃沿,他們只是感情好婴渡,可當我...
    茶點故事閱讀 65,792評論 6 386
  • 文/花漫 我一把揭開白布幻锁。 她就那樣靜靜地躺著,像睡著了一般边臼。 火紅的嫁衣襯著肌膚如雪哄尔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,985評論 1 291
  • 那天柠并,我揣著相機與錄音岭接,去河邊找鬼。 笑死臼予,一個胖子當著我的面吹牛鸣戴,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播粘拾,決...
    沈念sama閱讀 39,107評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼窄锅,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了缰雇?” 一聲冷哼從身側(cè)響起入偷,我...
    開封第一講書人閱讀 37,845評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎寓涨,沒想到半個月后盯串,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,299評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡戒良,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,612評論 2 327
  • 正文 我和宋清朗相戀三年体捏,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片糯崎。...
    茶點故事閱讀 38,747評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡几缭,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出沃呢,到底是詐尸還是另有隱情年栓,我是刑警寧澤,帶...
    沈念sama閱讀 34,441評論 4 333
  • 正文 年R本政府宣布薄霜,位于F島的核電站某抓,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏惰瓜。R本人自食惡果不足惜否副,卻給世界環(huán)境...
    茶點故事閱讀 40,072評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望崎坊。 院中可真熱鬧备禀,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,828評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至另患,卻和暖如春纽乱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柴淘。 一陣腳步聲響...
    開封第一講書人閱讀 32,069評論 1 267
  • 我被黑心中介騙來泰國打工迫淹, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留矾削,地道東北人怜瞒。 一個月前我還...
    沈念sama閱讀 46,545評論 2 362
  • 正文 我出身青樓肢执,卻偏偏與公主長得像累提,于是被迫代替她去往敵國和親丰泊。 傳聞我的和親對象是個殘疾皇子浪蹂,可洞房花燭夜當晚...
    茶點故事閱讀 43,658評論 2 350

推薦閱讀更多精彩內(nèi)容