Vue?2源碼解析ParseHTML函數(shù)HTML模板

更新時(shí)間：2022年08月15日 11:04:15 作者：MiyueFE

這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

ParseHTML函數(shù) - HTML 模板解析

之前在解析 parse 函數(shù)時(shí)，我們知道整個(gè) 解析 template 模板并生成 ast 對(duì)象 的過(guò)程都發(fā)生在這個(gè)函數(shù)的執(zhí)行過(guò)程中。

但是 parse 函數(shù)內(nèi)部本身只定義了一些標(biāo)簽、指令的處理方法和警告函數(shù)，并且在傳遞給 parseHTML 函數(shù)的參數(shù)中定義了四個(gè)處理方法。

最終是通過(guò)調(diào)用 parseHTML 來(lái)解析 template 模板

整個(gè)解析過(guò)程，其實(shí)就是通過(guò)一系列正則表達(dá)式來(lái)匹配 template 模板字符串，并截取該部分匹配內(nèi)容并重新匹配剩余部分，直到全部匹配完成。

所有的正則表達(dá)式包含以下內(nèi)容：

const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/  // 靜態(tài)屬性解析
const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // 動(dòng)態(tài)屬性解析（含有 v-xxx:, :, @, # 的屬性）
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)   // 開(kāi)始標(biāo)簽部分
const startTagClose = /^\s*(\/?)>/                     // 開(kāi)始標(biāo)簽結(jié)束
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)// 結(jié)束標(biāo)簽部分
const doctype = /^<!DOCTYPE [^>]+>/i                   // DOCTYPE 聲明
const comment = /^<!\--/                               // 注釋部分
const conditionalComment = /^<!\[/                     // 條件注釋

而 parseHTML 的簡(jiǎn)要代碼如下：

export function parseHTML(html, options: HTMLParserOptions) {
  const stack: any[] = []
  const expectHTML = options.expectHTML
  const isUnaryTag = options.isUnaryTag || no
  const canBeLeftOpenTag = options.canBeLeftOpenTag || no
  let index = 0
  let last, lastTag
  while (html) {
    last = html
    if (!lastTag || !isPlainTextElement(lastTag)) {
      let textEnd = html.indexOf('<')
      if (textEnd === 0) {
        if (comment.test(html)) {
          // 處理 注釋
          advance()
          continue
        }
        if (conditionalComment.test(html)) {
          // 處理 條件注釋
          advance()
          continue
        }
        // Doctype:
        if (html.match(doctype)) {
          advance()
          continue
        }
        // 結(jié)束:
        if (html.match(endTag)) {
          advance()
          parseEndTag()
          continue
        }
        // 開(kāi)始:
        if (parseStartTag()) {
          advance()
          handleStartTag()
          continue
        }
      }
      // 處理純文本
      options.chars()
      advance()
    } else {
      // 結(jié)束
      parseEndTag()
    }
    if (html === last) {
      options.chars && options.chars(html)
      break
    }
  }
  parseEndTag()
  function advance(n) {
  }
  function parseStartTag() {
  }
  function handleStartTag(match) {
  }
  function parseEndTag(tagName?: any, start?: any, end?: any) {
  }
}

其中定義了三個(gè)標(biāo)簽處理方法和一個(gè)定位方法：

advance 方法是更新當(dāng)前解析到的文本位置 index，并截取掉已解析的部分
parseStartTag 方法用來(lái)解析標(biāo)簽的開(kāi)始部分，內(nèi)部會(huì)生成一個(gè)包含標(biāo)簽名 tagName 和屬性數(shù)組 attrs 的對(duì)象 math，并循環(huán)解析內(nèi)部的字符串直到解析完整個(gè)字符串，將解析到的屬性存放到 attrs 數(shù)組中
handleStartTag 則是處理 parseStartTag 得到的 math 對(duì)象（大部分是處理每個(gè)屬性），如果上面解析到是非閉合標(biāo)簽的話，也會(huì)將這個(gè) math 對(duì)象修改成一個(gè)新對(duì)象插入到 parseHTML 執(zhí)行時(shí)定義的 stack 元素棧中；當(dāng)然，如果是自閉合標(biāo)簽，還會(huì)調(diào)用 parseEndTag 方法處理；并在 最后調(diào)用 options 中定義的 start 函數(shù)來(lái)生成 ast 對(duì)象
parseEndTag 方法就用來(lái)處理標(biāo)簽結(jié)束后的邏輯，會(huì)根據(jù)條件清除 stack 棧中的元素；如果此時(shí)元素標(biāo)簽是 br 或者 p，也會(huì)調(diào)用 option.start()，其他情況下一般會(huì)調(diào)用 options.end() 來(lái)結(jié)束當(dāng)前標(biāo)簽的解析

總的來(lái)說(shuō)，parseHTML 就是通過(guò)正則表達(dá)式來(lái)匹配不同的標(biāo)簽和屬性，進(jìn)行不同的標(biāo)簽/屬性處理，最后通過(guò) options 中的回調(diào)函數(shù)來(lái)創(chuàng)建完整的 ast 對(duì)象；并用 stack 元素棧的方式來(lái)保證原始 template 模板與 ast 對(duì)象的層級(jí)結(jié)構(gòu)的一致性。

以上就是Vue 2源碼解析ParseHTML函數(shù)HTML模板的詳細(xì)內(nèi)容，更多關(guān)于Vue ParseHTML函數(shù)模板的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: