Day25. 如何解析 HTML 語法

Transcript

1. 第 12 屆 IT 鐵⼈賽 30 天從 0 到 1 學 Svelte Day25 - 如何解析 HTML（svelte）語法？
2. 第 12 屆 IT 鐵⼈賽 解析 HTML 的⽬的 將語法轉成比較容易給程式處理的語法樹（AST）
3. 第 12 屆 IT 鐵⼈賽 流程概覽 詞法分析 （Lexer） 語法分析 ⽣成抽象語法樹 ⽣成程式碼
4. 第 12 屆 IT 鐵⼈賽 流程概覽 詞法分析 （Lexer） 語法分析 ⽣成抽象語法樹 ⽣成程式碼
5. 第 12 屆 IT 鐵⼈賽 如何將語法轉為語法樹 div p p p Hello text text <div> <p>Hello"</p> <p>text"</p> <p>text"</p> "</div>
6. 第 12 屆 IT 鐵⼈賽 有限狀態機 tag_open tag_name < read_text attribute tag_close /> attribute_name = data-toggle attribute_value " "
7. 第 12 屆 IT 鐵⼈賽 範例 1 <div>Hello</div> 讀取 "<": 進入 tag_open 狀態，開始讀取 tag_name 讀取 "d"：進入 tag_name 狀態，name += "d" 讀取 "i"：tag_name 狀態，name += "i" 讀取 "v"：tag_name 狀態，name += "v" 讀取 ">"：回到初始狀態，保存當前 tag_name
8. 第 12 屆 IT 鐵⼈賽 範例 1 <div>Hello</div> 讀取 "H"：進入 text 狀態，讀取 text += "H" 讀取 "e"：text 狀態，讀取 text += "e" 讀取 "l"：text 狀態，讀取 text += "l" 讀取 "l"：text 狀態，讀取 text += "l" 讀取 "o"：text 狀態，讀取 text += "o" 讀取 "<"：進入 tag_open 狀態 讀取："/"：進入 tag_close 狀態 讀取 "div"：將 tag_name 設為 div 讀取 ">"：回到初始狀態，完成解析
9. 第 12 屆 IT 鐵⼈賽 解析後產⽣的資料 type: Element tag_name: div children: [{ type: 'Text', data: 'Hello' }]
10. 第 12 屆 IT 鐵⼈賽 範例 2 <p role="status">Hello</p> 讀取 "<": 進入 tag_open 狀態，開始讀取 tag_name 讀取 "p"：進入 tag_name 狀態，name += "p" 讀取 " "：忽略 讀取 "r"：進入 attribute_name 狀態，attr += "r" 讀取 "o"：attribute_name 狀態，attr += "o" 讀取 "l"：attribute_name 狀態，attr += "l" 讀取 "e"：attribute_name 狀態，attr += "e"
11. 第 12 屆 IT 鐵⼈賽 範例 2 <p role="status">Hello</p> 讀取 "=": 進入 attribute_value 狀態，開始讀取 value 讀取 """：attribute_value_double_quote 狀態 讀取 "s"：attribute_value 狀態，attr += "s" 讀取 "t"：attribute_value 狀態，attr += "t" 讀取 "a"：attribute_value 狀態，attr += "a" 讀取 "t"：attribute_value 狀態，attr += "t" 讀取 "u"：attribute_value 狀態，attr += "u" 讀取 "s"：attribute_value 狀態，attr += "s"
12. 第 12 屆 IT 鐵⼈賽 範例 2 <p role="status">Hello</p> 讀取 """: 退出 attribute_value 狀態 讀取 ">"：進入 tag_close 狀態 讀取...：流程省略
13. 第 12 屆 IT 鐵⼈賽 解析後產⽣的資料 type: Element tag_name: p attrs: { role: "status" } children: [{ type: 'Text', data: 'Hello' }]
14. 第 12 屆 IT 鐵⼈賽 HTML 是可遞迴的標記語⾔ 例如： <div> <p>Text 1</p> <ul> <li>1234</li> <li>45567</li> </ul> </div>
15. 第 12 屆 IT 鐵⼈賽 遞迴下降解析器
16. 第 12 屆 IT 鐵⼈賽 為什麼 Svelte 要⾃⼰寫解析器？ ⽀援 svelte 語法如 bind, on, if block 等等 解析後可以在編譯時做到依賴追蹤、變數宣告與否、警告等
17. 第 12 屆 IT 鐵⼈賽 ⼀些要注意的事情 HTML 可⽀援某些無 close 的標籤 ⼤⼩寫 省略了像是 CDATA、comment 等處理 https://html.spec.whatwg.org/multipage/parsing.html