Pārlūkot izejas kodu

简化 parseHTML 函数

HcySunYang 7 gadi atpakaļ
vecāks
revīzija
7b2a90e237
1 mainītis faili ar 50 papildinājumiem un 2 dzēšanām
  1. 50 2
      note/9Vue中的html-parser.md

+ 50 - 2
note/9Vue中的html-parser.md

@@ -285,10 +285,58 @@ function decodeAttr (value, shouldDecodeNewlines) {
 
 #### parseHTML
 
-接下来,将进入真正的 `parse` 阶段,这个阶段我们将看到如何将 `html` 字符串作为字符输入流,并且按照一定的规则将其逐步消化分解。这也是我们本节的重点,同时接下来我们要分析的函数也是 `compiler/parser/html-parser.js` 文件所导出的函数,即 `parseHTML` 函数,这个函数的内容非常多,但其实它还是很有条理的,下面就是对 `parseHTML` 函数的简化,这能够让你更好的把握 `parseHTML` 函数的意图:
+接下来,将进入真正的 `parse` 阶段,这个阶段我们将看到如何将 `html` 字符串作为字符输入流,并且按照一定的规则将其逐步消化分解。这也是我们本节的重点,同时接下来我们要分析的函数也是 `compiler/parser/html-parser.js` 文件所导出的函数,即 `parseHTML` 函数,这个函数的内容非常多,但其实它还是很有条理的,下面就是对 `parseHTML` 函数的简化和注释,这能够让你更好的把握 `parseHTML` 函数的意图:
 
 ```js
-
+export function parseHTML (html, options) {
+  const stack = []  // 在处理 html 字符流的时候每当遇到一个非一元标签,都会将该标签 push 到该数组
+  const expectHTML = options.expectHTML // options 选项,一个布尔值
+  const isUnaryTag = options.isUnaryTag || no // options 选项,用来判断给定标签是否是一元标签
+  const canBeLeftOpenTag = options.canBeLeftOpenTag || no // options 选项,用来检查标签是否是一个:可以省略结束标签的非一元标签
+  let index = 0 // index 变量存储着当前字符流的读入位置
+  let last, lastTag // last 变量存储剩余未 parse 的 html 字符; // lastTag: 每当遇到一个非一元标签时,就将 lastTag 设置为该标签名
+
+  // 开启一个 while 循环,循环结束的条件是 html 为空,即 html 被 parse 完毕
+  while (html) {
+    last = html
+    
+    if (!lastTag || !isPlainTextElement(lastTag)) {
+      // 确保即将 parse 的内容不是在纯文本标签里 (script,style,textarea)
+    } else {
+      // 即将 parse 的内容是在纯文本标签里 (script,style,textarea)
+    }
+
+    // 将整个字符串作为文本对待
+    if (html === last) {
+      options.chars && options.chars(html)
+      if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {
+        options.warn(`Mal-formatted tag at end of template: "${html}"`)
+      }
+      break
+    }
+  }
+
+  // 调用 parseEndTag 函数
+  parseEndTag()
+
+  // advance 函数
+  function advance (n) {
+    // ...
+  }
+
+  // parseStartTag 函数用来 parse 开始标签
+  function parseStartTag () {
+    // ...
+  }
+  // handleStartTag 函数用来处理 parseStartTag 的结果
+  function handleStartTag (match) {
+    // ...
+  }
+  // parseEndTag 函数用来 parse 结束标签
+  function parseEndTag (tagName, start, end) {
+    // ...
+  }
+}
 ```