HTMLParserOptions.start()

用來解析標(biāo)簽的開始部分（匹配到標(biāo)簽開始部分時調(diào)用），主要區(qū)分標(biāo)簽類型、解析標(biāo)簽指令配置與動態(tài)綁定參數(shù)等等。

let root
let currentParent
function start(tag, attrs, unary, start, end) {
  const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
  if (isIE && ns === 'svg') attrs = guardIESVGBug(attrs)
  let element: ASTElement = createASTElement(tag, attrs, currentParent)
  if (ns) element.ns = ns
  if (__DEV__) {
    if (options.outputSourceRange) {
      element.start = start
      element.end = end
      element.rawAttrsMap = element.attrsList.reduce((cumulated, attr) ={
        cumulated[attr.name] = attr
        return cumulated
      }, {})
    }
    attrs.forEach(attr =invalidAttributeRE.test(attr.name) && warn(''))
  }
  if (isForbiddenTag(element) && !isServerRendering()) {
    element.forbidden = true
    __DEV__ && warn('')
  }
  for (let i = 0; i < preTransforms.length; i++) {
    element = preTransforms[i](element, options) || element
  }
  if (!inVPre) {
    processPre(element)
    if (element.pre) inVPre = true
  }
  if (platformIsPreTag(element.tag)) inPre = true
  if (inVPre) processRawAttrs(element)
  else if (!element.processed) {
    processFor(element)
    processIf(element)
    processOnce(element)
  }
  if (!root) {
    root = element
    if (__DEV__) checkRootConstraints(root)
  }
  if (!unary) {
    currentParent = element
    stack.push(element)
  } else {
    closeElement(element)
  }
},

start 函數(shù)在解析完標(biāo)簽的開始部分后被調(diào)用，接收的五個參數(shù)分別是：標(biāo)簽名 tag，標(biāo)簽的屬性數(shù)組 attrs，是否自閉合 unary，起點(diǎn)位置 start，結(jié)束位置 end

• 進(jìn)入函數(shù)之后，首先會驗(yàn)證 當(dāng)前元素的父元素的標(biāo)簽命名空間（svg，math或者undefined），如果是 svg 元素，還會對解析出來的 attrs 對象進(jìn)行處理，去掉 svg 標(biāo)簽定義屬性（xmlns 之類的屬性）
• 調(diào)用 createASTElement(tag, attrs, currentParent) 方法創(chuàng)建當(dāng)前元素對應(yīng)的 AST 對象 element。此時結(jié)構(gòu)如下：

{
  type: 1,
  tag: tag,
  attrsList: attrs,
  attrsMap: makeAttrsMap(attrs),
  rawAttrsMap: {},
  parent: currentParent,
  children: []
}

• 在開發(fā)環(huán)境下，還會將節(jié)點(diǎn)在字符串中的位置與節(jié)點(diǎn)原有的屬性進(jìn)行記錄，并且 校驗(yàn)屬性名 是否合法（禁止空格，引號，尖括號，反斜杠和等號）
• 校驗(yàn)標(biāo)簽合法性，如果是 style，script 之類的標(biāo)簽會被標(biāo)記為“被禁止”（element.forbidden = true）
• 遍歷 preTransforms 數(shù)組配置的處理函數(shù)，分別處理當(dāng)前節(jié)點(diǎn)的 ast 結(jié)果，并重新更新節(jié)點(diǎn)的 ast 對象（這里只處理 input）

處理后的 input ast element

這里處理后的 input ast element，會比基礎(chǔ)的 ast element 要多一些屬性：

{
attrs: [],
attrsList: [],
attrsMap: { 'v-model': 'xxx' },
chidlren: [],
derectives: [{ isDynamicArg: false, modifiers: undefined, name: 'model', rawName: 'model', value: 'xxx' }],
events: {
 input: { dynamic: undefined, value: "if($event.target.composing)return;xxx=$event.target.value" }
},
hasBindings: true,
parent: currentParent,
plain: false,
props: [{ dynamic: undefined, name: 'value', value: '(xxx)' }],
rawAttrsMap: {},
static: false
}

雖然上面也省略了幾個屬性和部分屬性值，但是重點(diǎn)屬性都在里面。在 preTransforms 過程中，實(shí)際上是通過 preTransformNode() 函數(shù)處理 input 標(biāo)簽，并且該標(biāo)簽具有 v-model 配置，沒有 v-model 時直接退出。

之后會判斷該元素是否有動態(tài)綁定類型，如果是 動態(tài)綁定的元素類型，則會增加一個 ifConditions 配置，內(nèi)部會填充 checkbox， radio 和 其他 input 類型的標(biāo)簽，用來根據(jù)不同的情況顯示不同的展示形式（個人理解這里為什么只有三種，是因?yàn)?checkbox 和 radio 與其他的 input 輸入框差別比較大，而且需要 label 標(biāo)簽配合）

• 判斷元素有沒有設(shè)置 v-pre 指令或者是一個 pre 標(biāo)簽，重新設(shè)置 inVPre， inPre 的狀態(tài)
• 如果此時 inVPre === true，則直接跳過這個節(jié)點(diǎn)內(nèi)部的編譯；否則會依次判斷 v-for，v-if 和 v-once 配置并進(jìn)行編譯

這里會先判斷 for 循環(huán)再判斷 if 條件，所以才有 for 的優(yōu)先級高于 if。

如果存在 v-for，會在 ast 對象中添加 for 和 forProcessed 屬性，并解析條件；如果內(nèi)部有文本節(jié)點(diǎn)要顯示循環(huán)的值，則會在標(biāo)簽最末級創(chuàng)建一個文本節(jié)點(diǎn)并綁定顯示條件

如果存在 v-if，會在 ast 對象中添加 if 和 ifProcessed 屬性，并添加一個 ifConditions 屬性，存放不同條件下的 ast 節(jié)點(diǎn)對象和渲染條件

如果有 v-once，一樣會在 ast 對象中添加 once 和 onceProcessed，并且會標(biāo)記 staticProcessed

• 上面的過程執(zhí)行完之后，如果此時外部的 root 是 undefined，則會將當(dāng)前的節(jié)點(diǎn)作為根元素賦值給 root，并調(diào)用 checkRootConstraints 檢查根節(jié)點(diǎn)
• 如果當(dāng)前節(jié)點(diǎn)是一個自閉合標(biāo)簽，則直接調(diào)用 closeElement 結(jié)束該節(jié)點(diǎn)；不然則將該節(jié)點(diǎn)賦值給 currentParent 并插入 stack 解析棧，以供子節(jié)點(diǎn)的解析

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

最新評論