第二章のHTMLパーサ

  ノートはシンプルなフレームを考え出すことができると一緒に一歩一超詳細なステップを書きたかったです。プログラムは常に問題を解決するためのステップのプロセスバイステップで書かれているのでしかし、変化検出は、唯一の難しすぎる見つけるために、半分書いて、あなたは順序で各段階を書いて、疲れて説明したいです。概要のみ。

  DOMとデータが一緒に結合するために、我々は、HTMLテンプレートに解析する必要があるAST、その後、レンダリング機能は、ASTに応じて生成されます。最後に、機能をレンダリングすることで、ページ全体をレンダリングします。この章では、テンプレートは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が通常の試合の仕方によって解決されていますが、人道に対する正規表現ので、あまりにも、と私はそれが書き込みされていない理解することはできませんので、私は解像度を達成するために、文字によって文字を読み出すことを選びました。文字に対応するファンクションキーに直面した場合、状態マシンの形に似たテンプレート文字列を、横断することによって処理されます。

image.png

つづく

ます。https：//www.jianshu.com/p/65a3f3cb4c24で再現