vue分析之template模板解析AST

2bdenny 發(fā)布于2019-08-22 18:24 / 3149人閱讀

摘要：注意看注釋很粗很簡單，我就是一程序員姓名，年齡，請(qǐng)聯(lián)系我吧是否保留注釋定義分隔符，默認(rèn)為對(duì)于轉(zhuǎn)成，則需要先獲取，對(duì)于這部分內(nèi)容，做一個(gè)簡單的分析，具體的請(qǐng)自行查看源碼。其中的負(fù)責(zé)修改以及截取剩余模板字符串。

通過查看vue源碼，可以知道Vue源碼中使用了虛擬DOM（Virtual Dom），虛擬DOM構(gòu)建經(jīng)歷 template編譯成AST語法樹 -> 再轉(zhuǎn)換為render函數(shù) 最終返回一個(gè)VNode(VNode就是Vue的虛擬DOM節(jié)點(diǎn)) 。
本文通過對(duì)Vue源碼中的AST轉(zhuǎn)化部分進(jìn)行簡單提取，返回靜態(tài)的AST結(jié)構(gòu)（不考慮兼容性及屬性的具體解析）。并最終根據(jù)一個(gè)實(shí)例的template轉(zhuǎn)化為最終的AST結(jié)構(gòu)。

什么是AST

在Vue的mount過程中，template會(huì)被編譯成AST語法樹，AST是指抽象語法樹（abstract syntax tree或者縮寫為AST），或者語法樹（syntax tree），是源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式。

代碼分析

首先、定義一個(gè)簡單的html DOM結(jié)構(gòu)、其中包括比較常見的標(biāo)簽、文本以及注釋，用來生成AST結(jié)構(gòu)。

  
    
    
      很粗
    
    很簡單，我就是一程序員
    

    
      姓名：{{name}}，年齡：{{age}}，
      請(qǐng)聯(lián)系我吧

對(duì)于轉(zhuǎn)成AST，則需要先獲取template，對(duì)于這部分內(nèi)容，做一個(gè)簡單的分析，具體的請(qǐng)自行查看Vue源碼。
具體目錄請(qǐng)參考： "/src/platforms/web/entry-runtime-with-compiler"
從vue官網(wǎng)中知道，vue提供了兩個(gè)版本，完整版和只包含運(yùn)行時(shí)版，差別是完整版包含編譯器，就是將template模板編譯成AST，再轉(zhuǎn)化為render函數(shù)的過程，因此只包含運(yùn)行時(shí)版必須提供render函數(shù)。
注意：此處處理比較簡單，只是為了獲取template，以便用于生成AST。

  function Vue (options) {
    // 如果沒有提供render函數(shù)，則處理template，否則直接使用render函數(shù)
    if (!options.render) {
      let template = options.template;
      // 如果提供了template模板
      if (template) {
        // template: "#template",
        // template: "",
        if (typeof template === "string") {
          // 如果為"#template"
          if (template.charAt(0) === "#") {
            let tpl = query(template);
            template = tpl ? tpl.innerHTML : "";
          }
          // 否則不做處理，如：""
        } else if (template.nodeType) {
          // 如果模板為DOM節(jié)點(diǎn)，如：template: document.querySelector("#template")
          // 比如：
          template = template.innerHTML;
        }
      } else if (options.el) {
        // 如果沒有模板，則使用el
        template = getOuterHTML(query(options.el));
      }

      if (template) {   
        // 將template模板編譯成AST（此處省略一系列函數(shù)、參數(shù)處理過程，具體見下圖及源碼）
        let ast = null;
        ast = parse(template, options);
        console.log(ast)
      }
    }
  }

可以看出：在options中，vue默認(rèn)先使用render函數(shù)，如果沒有提供render函數(shù)，則會(huì)使用template模板，最后再使用el，通過解析模板編譯AST，最終轉(zhuǎn)化為render。
其中函數(shù)如下：

  function query (el) {
    if (typeof el === "string") {
      var selected = document.querySelector(el);
      if (!selected) {
        console.error("Cannot find element: " + el);
      }
      return selected;
    }
    return el;
  }

  function getOuterHTML (el) {
    if (el.outerHTML) {
      return el.outerHTML;
    } else {
      var dom = document.createElement("div");
      dom.appendChild(el.cloneNode(true));
      return dom.innerHTML;
    }
  }

對(duì)于定義組件模板形式，可以參考下這篇文章

說了這么多，也不廢話了，下面重點(diǎn)介紹template編譯成AST的過程。
根據(jù)源碼，先定義一些基本工具方法，以及對(duì)相關(guān)html標(biāo)簽進(jìn)行分類處理等。

  // script、style、textarea標(biāo)簽
  function isPlainTextElement (tag) {
    let tags = {
      script: true,
      style: true,
      textarea: true
    }
    return tags[tag]
  }

  // script、style標(biāo)簽
  function isForbiddenTag (tag) {
    let tags = {
      script: true,
      style: true
    }
    return tags[tag]
  }

  // 自閉和標(biāo)簽
  function isUnaryTag (tag) {
    let strs = `area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr`;
    let tags = makeMap(strs);
    return tags[tag];
  }

  // 結(jié)束標(biāo)簽可以省略"/"
  function canBeLeftOpenTag (tag) {
    let strs = `colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source`;
    let tags = makeMap(strs);
    return tags[tag];
  }

  // 段落標(biāo)簽
  function isNonPhrasingTag (tag) {
    let strs = `address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track`;
    let tags = makeMap(strs);
    return tags[tag];
  }

  // 結(jié)構(gòu)：如
    # {
    #   script: true,
    #   style: true
    # }
  function makeMap(strs) {
    let tags = strs.split(",");
    let o = {}
    for (let i = 0; i < tags.length; i++) {
      o[tags[i]] = true;
    }
    return o;
  }

定義正則如下：

  // 匹配屬性
  const attribute = /^s*([^s""<>/=]+)(?:s*(=)s*(?:"([^"]*)"+|"([^"]*)"+|([^s""=<>`]+)))?/
  const ncname = "[a-zA-Z_][w-.]*"
  const qnameCapture = `((?:${ncname}:)?${ncname})`
  // 匹配開始標(biāo)簽開始部分
  const startTagOpen = new RegExp(`^<${qnameCapture}`)
  // 匹配開始標(biāo)簽結(jié)束部分
  const startTagClose = /^s*(/?)>/
  // 匹配結(jié)束標(biāo)簽
  const endTag = new RegExp(`^]*>`)
  // 匹配注釋
  const comment = /^");
            if (commentEnd >= 0) {
              if (opt.shouldKeepComment && opt.comment) {
                // 保存注釋內(nèi)容
                opt.comment(html.substring(4, commentEnd))
              }
              // 調(diào)整index以及html
              advance(commentEnd + 3);
              continue;
            }
          }
          // 處理 html條件注釋, 如

          // 處理html聲明Doctype

          // 處理開始標(biāo)簽startTaga
          const startTagMatch = parseStartTag();
          if (startTagMatch) {
            handleStartTag(startTagMatch);
            continue;
          }

          // 匹配結(jié)束標(biāo)簽endTag
          const endTagMatch = html.match(endTag);
          if (endTagMatch) {
            // 調(diào)整index以及html
            advance(endTagMatch[0].length);
            // 處理結(jié)束標(biāo)簽
            parseEndTag(endTagMatch[1]);
            continue;
          }
        }
        let text;
        if (textEnd > 0) {
          // html為純文本，需要考慮文本中含有"<"的情況，此處省略，請(qǐng)自行查看源碼
          text = html.slice(0, textEnd);
           // 調(diào)整index以及html
          advance(textEnd);
        }
        if (textEnd < 0) {
          // htlml以文本開始
          text = html;
          html = "";
        }
        // 保存文本內(nèi)容
        if (opt.chars) {
          opt.chars(text);
        }
      } else {
        // tag為script/style/textarea
        let stackedTag = lastTag.toLowerCase();
        let tagReg = new RegExp("([sS]*?)(]*>)", "i");

        // 簡單處理下，詳情請(qǐng)查看源碼
        let match = html.match(tagReg);
        if (match) {
          let text = match[1];
          if (opt.chars) {
            // 保存script/style/textarea中的內(nèi)容
            opt.chars(text);
          }
          // 調(diào)整index以及html
          advance(text.length + match[2].length);
          // 處理結(jié)束標(biāo)簽//
          parseEndTag(stackedTag);
        }
      }
    }
  }

定義advance:

  // 修改模板不斷解析后的位置，以及截取模板字符串，保留未解析的template
  function advance (n) {
    index += n;
    html = html.substring(n)
  }

在parseHTML中，可以看到：通過不斷循環(huán)，修改當(dāng)前未知的索引index以及不斷截取html模板，并分情況處理、解析，直到最后剩下空字符串為止。
其中的advance負(fù)責(zé)修改index以及截取剩余html模板字符串。
下面主要看看解析開始標(biāo)簽和結(jié)束標(biāo)簽：

  function parseStartTag () {
    let start = html.match(startTagOpen);
    if (start) {
      // 結(jié)構(gòu)：["
        // 調(diào)整index以及html
        advance(end[0].length)
        match.end = index;
        return match;
      }
    }
  }

在parseStartTag中，將開始標(biāo)簽處理成特定的結(jié)構(gòu)，包括標(biāo)簽名、所有的屬性名，開始位置、結(jié)束位置及是否是自閉和標(biāo)簽。
結(jié)構(gòu)如：{
tagName,
attrs,
start,
end,
unarySlash
}

  function handleStartTag(match) {
    const tagName = match.tagName;
    const unarySlash = match.unarySlash;
    
    if (opt.expectHTML) {
      
      if (lastTag === "p" && isNonPhrasingTag(tagName)) {
        // 如果p標(biāo)簽包含了段落標(biāo)簽，如div、h1、h2等
        // 形如: 

        // 與parseEndTag中tagName為p時(shí)相對(duì)應(yīng)，處理
，添加
        // 處理結(jié)果: 

        parseEndTag(lastTag);
      }
      if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
        // 如果標(biāo)簽閉合標(biāo)簽可以省略"/"
        // 形如：

        // 處理結(jié)果: 

        parseEndTag(tagName);
      }
    }

    // 處理屬性結(jié)構(gòu)（name和vulue形式）
    let attrs = [];
    attrs.length = match.attrs.length;
    for (let i = 0, len = match.attrs.length; i < len; i++) {
      attrs[i] = {
        name: match.attrs[i][2],
        value: match.attrs[i][3]
      }
    }
    // 判斷是不是自閉和標(biāo)簽，如

    let unary = isUnaryTag(tagName) || !!unarySlash;

    // 如果不是自閉合標(biāo)簽，保存到stack中，用于endTag匹配，
    if (!unary) {
      stack.push({
        tag: tagName,
        lowerCasedTag: tagName.toLowerCase(),
        attrs: attrs
      })
      // 重新設(shè)置上一個(gè)標(biāo)簽
      lastTag = tagName;
    }

    if (opt.start) {
      opt.start(tagName, attrs, unary)
    }
  }

將開始標(biāo)簽處理成特定結(jié)構(gòu)后，再通過handleStartTag，將attrs進(jìn)一步處理，成name、value結(jié)構(gòu)形式。
結(jié)構(gòu)如：attrs: [
{

name: "id",
value: "app"

}
]
保持和之前處理一致，非自閉和標(biāo)簽時(shí)，從外標(biāo)簽往內(nèi)標(biāo)簽，一層層入棧，需要保存到stack中，并設(shè)置lastTag為當(dāng)前標(biāo)簽。

  function parseEndTag (tagName) {
    let pos = 0;

    // 匹配stack中開始標(biāo)簽中，最近的匹配標(biāo)簽位置
    if (tagName) {
      tagName = tagName.toLowerCase();
      for (pos = stack.length - 1; pos >= 0; pos--) {
        if (stack[pos].lowerCasedTag === tagName) {
          break;
        }
      }
    }

    // 如果可以匹配成功
    if (pos >= 0) {
      let i = stack.length - 1;
      if (i > pos || !tagName) {
        console.error(`tag <${stack[i - 1].tag}> has no matching end tag.`)
      }
      // 如果匹配正確: pos === i
      if (opt.end) {
        opt.end();
      }
      // 將匹配成功的開始標(biāo)簽出棧，并修改lastTag為之前的標(biāo)簽
      stack.length = pos;
      lastTag = pos && stack[stack.length - 1].tagName;
    } else if (tagName === "br") {
      // 處理: 

      if (opt.start) {
        opt.start(tagName, [], true)
      }
    } else if (tagName === "p") {
      // 處理上面說的情況：

      if (opt.start) {
        opt.start(tagName, [], false);
      }
      if (opt.end) {
        opt.end();
      }
    }
  }

parseEndTag中，處理結(jié)束標(biāo)簽時(shí)，需要一層層往外，在stack中找到當(dāng)前標(biāo)簽最近的相同標(biāo)簽，獲取stack中的位置，如果標(biāo)簽匹配正確，一般為stack中的最后一個(gè)（否則缺少結(jié)束標(biāo)簽），如果匹配成功，將棧中的匹配標(biāo)簽出棧，并重新設(shè)置lastTag為棧中的最后一個(gè)。
注意：需要特殊處理br或p標(biāo)簽，標(biāo)簽在stack中找不到對(duì)應(yīng)的匹配標(biāo)簽，需要多帶帶保存到AST結(jié)構(gòu)中，而

標(biāo)簽主要是為了處理特殊情況，和之前開始標(biāo)簽中處理相關(guān)，此時(shí)會(huì)多一個(gè)

標(biāo)簽，在stack中最近的標(biāo)簽不是p，也需要多帶帶保存到AST結(jié)構(gòu)中。

差點(diǎn)忘了還有一個(gè)parseText函數(shù)。
其中parseText：

  function parseText (text, delimiters) {
    let open;
    let close;
    let resDelimiters;
    // 處理自定義的分隔符
    if (delimiters) {
      open = delimiters[0].replace(regexEscapeRE, "$&");
      close = delimiters[1].replace(regexEscapeRE, "$&");
      resDelimiters = new RegExp(open + "((?:.|
)+?)" + close, "g");
    }
    const tagRE = delimiters ? resDelimiters : defaultTagRE;
    // 沒有匹配，文本中不含表達(dá)式，返回
    if (!tagRE.test(text)) {
      return;
    }
    const tokens = []
    const rawTokens = [];

    let lastIndex = tagRE.lastIndex = 0;
    let index;
    let match;
    // 循環(huán)匹配本文中的表達(dá)式
    while(match = tagRE.exec(text)) {
      index = match.index;

      if (index > lastIndex) {
        let value = text.slice(lastIndex, index);
        tokens.push(JSON.stringify(value));
        rawTokens.push(value)
      }
      // 此處需要處理過濾器，暫不處理，請(qǐng)查看源碼
      let exp = match[1].trim();
      tokens.push(`_s(${exp})`);
      rawTokens.push({"@binding": exp})
      lastIndex = index + match[0].length;
    }
    if (lastIndex < text.length) {
      let value = text.slice(lastIndex);
      tokens.push(JSON.stringify(value));
      rawTokens.push(value);
    }
    return {
      expression: tokens.join("+"),
      tokens: rawTokens
    }
  }

最后，附上以上原理簡略分析圖：

  
    
    
        很粗
    
    很簡單，我就是一程序員
    

    
      姓名：{{name}}，年齡：{{age}}，
      請(qǐng)聯(lián)系我吧
    
  

解析流程如下：

分析過程：tagName    stack1      lastTag    currentParent    stack2       root     children       parent    操作

  div       div        [div]       div          div         [div]          div       div:[p]      null        入棧
  comment  注釋 ---> 保存到currentParent.children中
  p       p        [div,p]       p              p        [div,p]       div       p:[b]          div       入棧
  b        b        [div,p,b]      b            b           [div,p,b]      div     b:[text]      p         入棧
  /b       b        [div,p]        p            p           [div,p]        div     ---            ---       出棧
  /p       p        [div]          div          div         [div]          div       ---            ---       出棧
  text    文本 ---> 經(jīng)過處理后，保存到currentParent.children中
  h1       h1       [div,h1]       h1           h1          [div,h1]       div    h1:[text]      div        入棧
  text    文本 ---> 經(jīng)過處理后，保存到currentParent.children中
  /h1      h1       [div]         div           div         [div]          div    ---            ---       出棧
  /div     div      []            null          null        []             div    ---            ---       出棧

最終:root = div:[p,h1]

最終AST結(jié)構(gòu)如下：

以上是我根據(jù)vue源碼分析，抽出來的簡單的template轉(zhuǎn)化AST，文中若有什么不對(duì)的地方請(qǐng)大家?guī)兔χ刚救俗罱惨恢痹趯W(xué)習(xí)Vue的源碼，希望能夠拿出來與大家一起分享經(jīng)驗(yàn)，接下來會(huì)繼續(xù)更新后續(xù)的源碼，如果覺得有需要可以相互交流。

云服務(wù)器 GPU云服務(wù)器大數(shù)據(jù)之?dāng)?shù)據(jù)挖掘分析 AST html 模板解析 python ast

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95814.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

2bdenny

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于javaweb+jsp的高?？蒲许?xiàng)目管理系統(tǒng)

閱讀 2421·2021-11-25 09:43
Java零基礎(chǔ)入門筆記｜原來學(xué)Java可以這么簡單

閱讀 1255·2021-11-24 09:39
馬斯克公開支持上班“摸魚”，允許員工坐班聽音樂，還可外放

閱讀 756·2021-11-23 09:51
DediPath宣布已將業(yè)務(wù)擴(kuò)展到亞特蘭大，夏季促銷仍有效，美國便宜服務(wù)器$39/月起

閱讀 2391·2021-09-07 10:18
revenueserver：荷蘭抗投訴vps，不限流量，$7.59/月，1Gbps帶寬，2G內(nèi)存/1

閱讀 1881·2021-09-01 11:39
我的前端編碼習(xí)慣 —— css篇

閱讀 2784·2019-08-30 15:52
css3

閱讀 2599·2019-08-30 14:21
前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

閱讀 2865·2019-08-29 16:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

vue分析之template模板解析AST

姓名：{{name}}，年齡：{{age}}，請(qǐng)聯(lián)系我吧

姓名：{{name}}，年齡：{{age}}，請(qǐng)聯(lián)系我吧

相關(guān)文章

Vue編譯器AST抽象語法樹源碼分析

**【Vue原理】Compile - 源碼版之 Parse 主要流程**

vue源碼閱讀之數(shù)據(jù)渲染過程

**【Vue原理】Compile - 源碼版之 optimize 標(biāo)記靜態(tài)節(jié)點(diǎn)**

Vue 2.0源碼學(xué)習(xí)

發(fā)表評(píng)論

0條評(píng)論

2bdenny

男|高級(jí)講師

TA的文章

基于javaweb+jsp的高?？蒲许?xiàng)目管理系統(tǒng)

Java零基礎(chǔ)入門筆記｜原來學(xué)Java可以這么簡單

馬斯克公開支持上班“摸魚”，允許員工坐班聽音樂，還可外放

DediPath宣布已將業(yè)務(wù)擴(kuò)展到亞特蘭大，夏季促銷仍有效，美國便宜服務(wù)器$39/月起

revenueserver：荷蘭抗投訴vps，不限流量，$7.59/月，1Gbps帶寬，2G內(nèi)存/1

我的前端編碼習(xí)慣 —— css篇

css3

前端每日實(shí)戰(zhàn)：155# 視頻演示如何用純 CSS 創(chuàng)作一只熱氣球

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

vue分析之template模板解析AST

姓名：{{name}}，年齡：{{age}}， 請(qǐng)聯(lián)系我吧

姓名：{{name}}，年齡：{{age}}， 請(qǐng)聯(lián)系我吧

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

姓名：{{name}}，年齡：{{age}}，請(qǐng)聯(lián)系我吧

姓名：{{name}}，年齡：{{age}}，請(qǐng)聯(lián)系我吧