const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/  // 靜態(tài)屬性解析
const dynamicArgAttribute = /^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/ // 動態(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}`)   // 開始標(biāo)簽部分
const startTagClose = /^\s*(\/?)>/                     // 開始標(biāo)簽結(jié)束
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)// 結(jié)束標(biāo)簽部分
const doctype = /^<!DOCTYPE [^>]+>/i                   // DOCTYPE 聲明
const comment = /^<!\--/                               // 注釋部分
const conditionalComment = /^<!\[/                     // 條件注釋

而 parseHTML 的簡要代碼如下：

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
        }
        // 開始:
        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) {
  }
}

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

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

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

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

您可能感興趣的文章: