??本來是想寫一篇超詳細，跟著一步一步做就能搞出一個簡單框架的筆記的。但寫了一半變化檢測才發(fā)現(xiàn)太難了，因為一個程序總是在一步一步解決問題的過程寫出來的，想要每步按順序?qū)懗鰜聿⒓右越忉屘哿恕Ｖ荒苁钦f明了。

??為了將DOM和數(shù)據(jù)綁定在一起，我們需要將HTML模板解析成AST，然后再根據(jù)AST生成渲染函數(shù)。最后通過渲染函數(shù)渲染出整個頁面。本章講的就是將模板解析成AST的過程。即將：

<div>
  <span>{{message}}</span>
</div>

編譯成類似以下對象

{
    type: 1,
    tag: "div",
    attrsList: [],
    attrsMap: {},
    children: [
        {
            type: 1,
            tag: "span",
            attrsList: [],
            attrsMap: {},
            parent: {tag:"div"...},
            children: [],
            text: "{{message}}",
            expression: "_s(message)",
            hasBindings: false
        }
    ],
    text: "\n        ",
    expression: null,
    hasBindings: false
}

??Vue的解析是采用正則進行匹配的方式，但因為正則表達式實在太反人類了，我即寫不出也理解不了，所以我選擇用逐個字符讀出來的方式來實現(xiàn)解析。通過遍歷模板字符串，當(dāng)遇到關(guān)鍵的字符則交給對應(yīng)的函數(shù)進行處理，類似狀態(tài)機的形式：

image.png

TO BE CONTINUED