前言
看vue原始碼已經有一段時間了，但是很多東西都是看的時候當時記住了，過段時間不去使用或者回顧又忘記了，所以現在開始以部落格的方式寫一下自己的理解，也方便後續自己的回顧。
這一篇主要講的是Vue原始碼解析parse的相關內容，主要分成三大塊
- 從編譯入口到parse函式（封裝思想，柯里化）
- parse中的詞法分析（把template模板解析成js物件）
- parse中的語法分析（處理解析出的js物件生成ast）
從編譯入口到parse函式
編譯入口
讓我們開始直入主題吧，在vue原始碼開始入口的entry-runtime-with-compiler.js檔案中，我們可以看到$mount的定義，下面是精簡後的原始碼，這邊可以看到先是判斷我們傳入的options上面是不是有render方法，沒有的話才會走template生成render函式的過程，最後都是執行render函式。
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && query(el)
const options = this.$options
// 是否有render方法，目前是沒有
if (!options.render) {
let template = options.template
if (template) {
} else if (el) {
template = getOuterHTML(el)
}
if (template) {
// 拿到temp後，編譯成render函式
const { render, staticRenderFns } = compileToFunctions(template, {
outputSourceRange: process.env.NODE_ENV !== 'production',
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
options.render = render
options.staticRenderFns = staticRenderFns
}
}
return mount.call(this, el, hydrating)
}
複製程式碼compileToFunctions
這邊可以看到主要生成render的函式就是compileToFunctions，這個函式定義在src/platforms/web/compiler/index.js中，這個檔案就四行程式碼
import { baseOptions } from './options'
import { createCompiler } from 'compiler/index'
const { compile, compileToFunctions } = createCompiler(baseOptions)
export { compile, compileToFunctions }
複製程式碼createCompiler
這時又發現compileToFunctions實際上是createCompiler這個地方解構出來的，那我們還是繼續向上找，這個時候已經找到了src/compiler/index.js這個檔案下，這個就是編譯三步走的主檔案了
import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen/index'
import { createCompilerCreator } from './create-compiler'
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 模版直譯器，功能為從HTML模版轉換為AST
const ast = parse(template.trim(), options)
// AST優化，處理靜態不參與重複渲染的模版片段
if (options.optimize !== false) {
optimize(ast, options)
}
// 程式碼生成器。基於AST，生成js函式，延遲到執行時執行，生成純HTML。
const code = generate(ast, options)
return {
ast,
render: code.render,
staticRenderFns: code.staticRenderFns
}
})
複製程式碼createCompilerCreator
這裡可以看到createCompiler是createCompilerCreator這個函式接收了baseCompile作為引數，真正的編譯過程都在這個baseCompile函式中執行的，所有需要繼續看createCompilerCreator這個函式裡是在哪呼叫baseCompile的，下面的虛擬碼一看不是有點眼熟，返回的compileToFunctions這個就是和入口的函式相對應，還是繼續深入下去吧，馬上就要到頭了?
export function createCompilerCreator (baseCompile: Function): Function {
return function createCompiler (baseOptions: CompilerOptions) {
funtion compile {
//省略
}
return {
compile,
compileToFunctions: createCompileToFunctionFn(compile)
}
}
}
複製程式碼createCompileToFunctionFn
看到createCompileToFunctionFn這個函式裡面可以看到先判斷了下快取然後執行了我們傳入的compile函式，入參為template，options。
export function createCompileToFunctionFn (compile: Function): Function {
const cache = Object.create(null)
return function compileToFunctions (
template: string,
options?: CompilerOptions,
vm?: Component
): CompiledFunctionResult {
options = extend({}, options)
// check cache
const key = options.delimiters
? String(options.delimiters) + template
: template
if (cache[key]) {
return cache[key]
}
// compile
const compiled = compile(template, options)
// turn code into functions
const res = {}
const fnGenErrors = []
res.render = createFunction(compiled.render, fnGenErrors)
res.staticRenderFns = compiled.staticRenderFns.map(code => {
return createFunction(code, fnGenErrors)
})
return (cache[key] = res)
}
}
複製程式碼終點compile
終於要執行到compile了，我自己都快要暈了，這邊主要處理了些options後，終於執行了baseCompile，這個函式就是在上面說三步走的主要函式了，到這個地方可以鬆一口氣了，不用繼續深入下去了。
function compile (
template: string,
options?: CompilerOptions
): CompiledResult {
const finalOptions = Object.create(baseOptions)
const errors = []
const tips = []
if (options) {
// merge custom modules
if (options.modules) {
finalOptions.modules =
(baseOptions.modules || []).concat(options.modules)
}
// merge custom directives
if (options.directives) {
finalOptions.directives = extend(
Object.create(baseOptions.directives || null),
options.directives
)
}
// copy other options
for (const key in options) {
if (key !== 'modules' && key !== 'directives') {
finalOptions[key] = options[key]
}
}
}
const compiled = baseCompile(template.trim(), finalOptions)
compiled.errors = errors
compiled.tips = tips
return compiled
}
複製程式碼這邊從入口到真正執行parse已經經歷了四五個步驟，這麼做主要是利用柯里化的思想，把多平臺的baseOptions，快取處理，編譯配置處理等進行了拆分封裝。這邊從編譯入口到parse函式就已經結束了，接下來讓我們來看看parse中做了些什麼。
parse中的詞法分析
parser簡介
首先讓我們簡單的瞭解一下parser，簡單來說就是把原始碼轉換為目的碼的工具。引用下基維百科對於parser的解釋。
語法分析器（parser）通常是作為編譯器或直譯器的元件出現的，它的作用是進行語法檢查、並構建由輸入的單片語成的資料結構（一般是語法分析樹、抽象語法樹等層次化的資料結構）。語法分析器通常使用一個獨立的詞法分析器從輸入字元流中分離出一個個的“單詞”，並將單詞流作為其輸入。
vue其實也是使用解析器來對模板程式碼進行解析。
/*!
* HTML Parser By John Resig (ejohn.org)
* Modified by Juriy "kangax" Zaytsev
* Original code by Erik Arvidsson, Mozilla Public License
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
*/
複製程式碼它的原始碼上有這樣一段註釋，是Vue fork 自 John Resig 所寫的一個開源專案：erik.eae.net/simplehtmlp… 然後在這個解析器上面做了一些擴充套件。
流程總覽
大概瞭解瞭解析器後讓我們來看看parse的整體流程，這邊通過精簡後的程式碼可以看到parse實際上就是先處理了一些傳入的options，然後執行了parseHTML函式，傳入了template，options和相關鉤子。
export function parse (
template: string,
options: CompilerOptions
): ASTElement | void {
// 處理傳入的options合併的例項vm的options上
dealOptions(options)
// 模板和相關的配置和鉤子傳入到parseHTML中
parseHTML(template, {
someOptions,
start (tag, attrs, unary, start) {...},
end (tag, start, end) {...},
chars (text: string, start: number, end: number) {...},
comment (text: string, start, end) {}...,
})
}
複製程式碼這邊我們繼續看parseHTML函式裡面做了什麼？
parseHTML是定義在src/compiler/parser/html-parser.js這個檔案中，首先檔案頭部是定義了一些後續需要使用的正則，不太懂正則的可以先看看正則先關的知識。
// Regular Expressions for parsing tags and attributes
// 匹配標籤的屬性
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeLetters}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)
const startTagClose = /^\s*(\/?)>/
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
const doctype = /^<!DOCTYPE [^>]+>/i
// #7298: escape - to avoid being pased as HTML comment when inlined in page
const comment = /^<!\--/
const conditionalComment = /^<!\[/
複製程式碼然後先看看parseHTML的虛擬碼，大概流程就是先定義需要的變數，然後迴圈遍歷template，通過正則匹配到對應的標籤後，通過進行處理通過傳入的鉤子函式把處理後的物件轉換成ast。
export function parseHTML (html, options) {
const stack = []
const expectHTML = options.expectHTML
const isUnaryTag = options.isUnaryTag || no
const canBeLeftOpenTag = options.canBeLeftOpenTag || no
let index = 0
let last, lastTag
while (html) {
if (!lastTag || !isPlainTextElement(lastTag)){
let textEnd = html.indexOf('<')
if (textEnd === 0) {
if(matchComment) {
advance(commentLength)
continue
}
if(matchDoctype) {
advance(doctypeLength)
continue
}
if(matchEndTag) {
advance(endTagLength)
parseEndTag()
continue
}
if(matchStartTag) {
parseStartTag()
handleStartTag()
continue
}
}
handleText()
advance(textLength)
} else {
handlePlainTextElement()
parseEndTag()
}
}
}
複製程式碼輔助函式分析
讓我們分別看看parseHTML中的四個輔助函式他們的實現。
首先advance主要是把處理過後的html給擷取掉，直到在上面程式碼while (html)中判斷為空，代表所有的模板已經處理完成。
// 為計數index加上n，同時，使html到n個字元以後到位置作為起始位
function advance (n) {
index += n
html = html.substring(n)
}
複製程式碼首先是通過正則匹配開始標籤，簡單處理成物件後，把開始標籤儲存到陣列中，後續在匹配到閉合標籤的時候就會把這個陣列中的資料取出。
// 解析開始標籤
function parseStartTag () {
//正則匹配獲取HTML開始標籤
const start = html.match(startTagOpen)
if (start) {
const match = {
tagName: start[1],
attrs: [],
start: index
}
advance(start[0].length)
let end, attr
// 開始標籤中的屬性都儲存到一個陣列中
while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
advance(attr[0].length)
match.attrs.push(attr)
}
if (end) {
match.unarySlash = end[1]
advance(end[0].length)
match.end = index
return match
}
}
}
複製程式碼把上面parseStartTag這個函式簡單處理的物件再進行一次處理
// 處理開始標籤，將開始標籤中的屬性提取出來。
function handleStartTag (match) {
const tagName = match.tagName
const unarySlash = match.unarySlash
// 解析結束標籤
if (expectHTML) {
if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
parseEndTag(lastTag)
}
if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
parseEndTag(tagName)
}
}
const unary = isUnaryTag(tagName) || !!unarySlash
// 解析開始標籤的屬性名和屬性值
const l = match.attrs.length
const attrs = new Array(l)
for (let i = 0; i < l; i++) {
const args = match.attrs[i]
// hackish work around FF bug https://bugzilla.mozilla.org/show_bug.cgi?id=369778
if (IS_REGEX_CAPTURING_BROKEN && args[0].indexOf('""') === -1) {
if (args[3] === '') { delete args[3] }
if (args[4] === '') { delete args[4] }
if (args[5] === '') { delete args[5] }
}
const value = args[3] || args[4] || args[5] || ''
const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
? options.shouldDecodeNewlinesForHref
: options.shouldDecodeNewlines
attrs[i] = {
name: args[1],
value: decodeAttr(value, shouldDecodeNewlines)
}
}
// 將標籤及其屬性推如堆疊中
if (!unary) {
stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs })
lastTag = tagName
}
// 觸發 options.start 方法。
if (options.start) {
options.start(tagName, attrs, unary, match.start, match.end)
}
}
複製程式碼匹配結束標籤，找到剛剛開始標籤存放的陣列取出。
// 解析結束TAG
function parseEndTag (tagName, start, end) {
let pos, lowerCasedTagName
if (start == null) start = index
if (end == null) end = index
if (tagName) {
lowerCasedTagName = tagName.toLowerCase()
}
// 找到同類的開始 TAG 在堆疊中的位置
if (tagName) {
for (pos = stack.length - 1; pos >= 0; pos--) {
if (stack[pos].lowerCasedTag === lowerCasedTagName) {
break
}
}
} else {
// If no tag name is provided, clean shop
pos = 0
}
// 對堆疊中的大於等於 pos 的開始標籤使用 options.end 方法。
if (pos >= 0) {
// Close all the open elements, up the stack
for (let i = stack.length - 1; i >= pos; i--) {
if (process.env.NODE_ENV !== 'production' &&
(i > pos || !tagName) &&
options.warn
) {
options.warn(
`tag <${stack[i].tag}> has no matching end tag.`
)
}
if (options.end) {
options.end(stack[i].tag, start, end)
}
}
// Remove the open elements from the stack
// 從棧中移除元素，並標記為 lastTag
stack.length = pos
lastTag = pos && stack[pos - 1].tag
} else if (lowerCasedTagName === 'br') {
// 回車標籤
if (options.start) {
options.start(tagName, [], true, start, end)
}
} else if (lowerCasedTagName === 'p') {
// 段落標籤
if (options.start) {
options.start(tagName, [], false, start, end)
}
if (options.end) {
options.end(tagName, start, end)
}
}
}
複製程式碼html解析詳解
這邊詳細講解html解析,下面簡單的template模板就是作為這次詳解的例子，有可能不能覆蓋全部場景。
<div id="app">
<!-- 註釋 -->
<div v-if="show" class="message">{{message}}</div>
</div>
複製程式碼上面這一段是作為字串來處理，首先我們的開頭是<app，所有這個是會走到parseStartTag這個函式中
const startTagMatch = parseStartTag()
if (startTagMatch) {
handleStartTag(startTagMatch)
if (shouldIgnoreFirstNewline(lastTag, html)) {
advance(1)
}
continue
}
}
複製程式碼返回值就是一個這樣的簡單匹配出來的js物件，然後再通過handleStartTag這個函式把這裡面一些無用的和需要新增的處理的資料處理後，執行最開始的start鉤子函式，這個在後面的ast生成中描述。
{
attrs: [
{
0: " id="app"",
1: "id",
2: "=",
3: "app",
4: undefined,
5: undefined,
end: 13,
groups: undefined,
index: 0,
input: " id="app">↵ <!-- 註釋 -->↵ <div v-if="show" class="message">{{message}}</div>↵ </div>",
start: 4,
}
],
end: 14,
start: 0,
tagName: "div",
unarySlash: "",
}
複製程式碼因為有advanceh函式，現在我們的程式碼已經變成下面這樣了，然後繼續迴圈。
<!-- 註釋 -->
<div v-if="show" class="message">{{message}}</div>
</div>
複製程式碼現在就是走到了註釋節點這一塊，匹配到後執行開始傳入的comment鉤子函式建立註釋節點ast
// 註釋匹配
if (comment.test(html)) {
const commentEnd = html.indexOf('-->')
if (commentEnd >= 0) {
// 如果需要保留註釋，執行 option.comment 方法
if (options.shouldKeepComment) {
options.comment(html.substring(4, commentEnd))
}
advance(commentEnd + 3)
continue
}
}
複製程式碼這個時候我們的程式碼已經變成了下面這個樣子，有沒有觀察到一個細節，就是註釋雖然沒有了，但是註釋距離下一個<div這個中間還是有留白的。
<div v-if="show" class="message">{{message}}</div>
</div>
複製程式碼這樣的話html.indexOf('<')這個匹配出來的就不是0，會走到else邏輯，然後作為文字節點給處理掉。
繼續走一次處理開始標籤<div v-if="show" class="message">，文字標籤`{{message}}後我們的template變成了
</div>
</div>
複製程式碼這個時候就會通過結束標籤的判斷走到parseEndTag函式，呼叫開始傳入的end鉤子函式。
// End tag: 結束標籤
const endTagMatch = html.match(endTag)
if (endTagMatch) {
const curIndex = index
advance(endTagMatch[0].length)
// 解析結束標籤
parseEndTag(endTagMatch[1], curIndex, index)
continue
}
複製程式碼這樣我們的template已經被全部解析完成了，可能還有一些別的匹配沒有在這個例子中，但是思路都是一樣的，就是正則匹配到後解析成js物件然後交給傳入的鉤子函式生成ast，下面是迴圈處理html的詳解。
while (html) {
last = html
// 如果沒有lastTag，且不是純文字內容元素中：script、style、textarea
if (!lastTag || !isPlainTextElement(lastTag)) {
// 文字結束，通過<查詢。
let textEnd = html.indexOf('<')
// 文字結束位置在第一個字元，即第一個標籤為<
if (textEnd === 0) {
// 註釋匹配
if (comment.test(html)) {
const commentEnd = html.indexOf('-->')
if (commentEnd >= 0) {
// 如果需要保留註釋，執行 option.comment 方法
if (options.shouldKeepComment) {
options.comment(html.substring(4, commentEnd))
}
advance(commentEnd + 3)
continue
}
}
// http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
// 條件註釋
if (conditionalComment.test(html)) {
const conditionalEnd = html.indexOf(']>')
if (conditionalEnd >= 0) {
advance(conditionalEnd + 2)
continue
}
}
// Doctype:
const doctypeMatch = html.match(doctype)
if (doctypeMatch) {
advance(doctypeMatch[0].length)
continue
}
// End tag: 結束標籤
const endTagMatch = html.match(endTag)
if (endTagMatch) {
const curIndex = index
advance(endTagMatch[0].length)
// 解析結束標籤
parseEndTag(endTagMatch[1], curIndex, index)
continue
}
// Start tag: 開始標籤
const startTagMatch = parseStartTag()
if (startTagMatch) {
handleStartTag(startTagMatch)
if (shouldIgnoreFirstNewline(lastTag, html)) {
advance(1)
}
continue
}
}
// < 標籤位置大於等於0，即標籤中有內容
let text, rest, next
if (textEnd >= 0) {
// 擷取從 0 - textEnd 的字串
rest = html.slice(textEnd)
// 獲取在普通字串中的<字元，而不是開始標籤、結束標籤、註釋、條件註釋
while (
!endTag.test(rest) &&
!startTagOpen.test(rest) &&
!comment.test(rest) &&
!conditionalComment.test(rest)
) {
// < in plain text, be forgiving and treat it as text
next = rest.indexOf('<', 1)
if (next < 0) break
textEnd += next
rest = html.slice(textEnd)
}
// 最終擷取字串內容
text = html.substring(0, textEnd)
advance(textEnd)
}
if (textEnd < 0) {
text = html
html = ''
}
// 繪製文字內容，使用 options.char 方法。
if (options.chars && text) {
options.chars(text)
}
} else {
// 如果lastTag 為 script、style、textarea
let endTagLength = 0
const stackedTag = lastTag.toLowerCase()
const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'))
const rest = html.replace(reStackedTag, function (all, text, endTag) {
endTagLength = endTag.length
if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
text = text
.replace(/<!\--([\s\S]*?)-->/g, '$1') // <!--xxx-->
.replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1') //<!CDATAxxx>
}
if (shouldIgnoreFirstNewline(stackedTag, text)) {
text = text.slice(1)
}
// 處理文字內容，並使用 options.char 方法。
if (options.chars) {
options.chars(text)
}
return ''
})
index += html.length - rest.length
html = rest
// 解析結束tag
parseEndTag(stackedTag, index - endTagLength, index)
}
// html文字到最後
if (html === last) {
// 執行 options.chars
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
}
}
複製程式碼這個地方附上個流程示意圖。
到這個地方其實已經把整個html解析完成了，後面我們就開始說傳入的那幾個鉤子函式是怎麼把我們解析生成的js物件變成ast的。
parse中的語法分析
當html解析完成後就需要進行詞法分析，把處理好的js物件變成一個ast。我們首先來看看createASTElement這個函式，看名字就是一個建立ast元素，在vue裡面ast其實就一個有特定格式的js物件。
export function createASTElement (
tag: string,
attrs: Array<ASTAttr>,
parent: ASTElement | void
): ASTElement {
return {
type: 1, // 節點型別 type = 1 為dom節點
tag, // 節點標籤
attrsList: attrs, // 節點屬性
attrsMap: makeAttrsMap(attrs), // 節點對映
parent, // 父節點
children: [] // 子節點
}
}
複製程式碼start
start這個鉤子函式就是慢慢地給這個AST進行裝飾，新增更多的屬性和標誌，現在讓我們具體看看這個函式，首先接著上面的例子，start現在接收的四個引數分別為
tag: div (元素的標籤名)
attrs: [ {end: 13, name: "id", start: 5, value: "app"} ] (元素上面的屬性)
unary: false (是否是一元)
start: 0 (開始位置)
複製程式碼start (tag, attrs, unary, start) {
// 獲取名稱空間
const ns = (currentParent && currentParent.ns) || platformGetTagNamespace(tag)
// handle IE svg bug
/* istanbul ignore if */
if (isIE && ns === 'svg') {
attrs = guardIESVGBug(attrs)
}
// 建立一個ast基礎元素
let element: ASTElement = createASTElement(tag, attrs, currentParent)
if (ns) {
element.ns = ns
}
// 服務端渲染的情況下是否存在被禁止標籤
if (isForbiddenTag(element) && !isServerRendering()) {
element.forbidden = true
process.env.NODE_ENV !== 'production' && warn(
'Templates should only be responsible for mapping the state to the ' +
'UI. Avoid placing tags with side-effects in your templates, such as ' +
`<${tag}>` + ', as they will not be parsed.',
{ start: element.start }
)
}
// 預處理一些動態型別：v-model
for (let i = 0; i < preTransforms.length; i++) {
element = preTransforms[i](element, options) || element
}
// 對vue的指令進行處理v-pre、v-if、v-for、v-once、slot、key、ref這裡就不細說了
if (!inVPre) {
processPre(element)
if (element.pre) {
inVPre = true
}
}
if (platformIsPreTag(element.tag)) {
inPre = true
}
if (inVPre) {
processRawAttrs(element)
} else if (!element.processed) {
// structural directives
processFor(element)
processIf(element)
processOnce(element)
}
// 限制根節點不能是slot，template，v-for這類標籤
if (!root) {
root = element
if (process.env.NODE_ENV !== 'production') {
checkRootConstraints(root)
}
}
// 不是單標籤就入棧，是的話結束這個元素的
if (!unary) {
currentParent = element
stack.push(element)
} else {
closeElement(element)
}
},
複製程式碼處理完成之後element元素就變成了，就是上面說的ast物件的格式。
{
attrsList: [{name: "id", value: "app", start: 5, end: 13}]
attrsMap: {id: "app"}
children: []
parent: undefined
start: 0
tag: "div"
type: 1
}
複製程式碼char
然後是我們程式碼裡面的一串空格進入了char方法，這個空格被trim後就變成空了，走到判斷text的地方直接跳過了，這個鉤子char函式在我們列子中{{message}}這個也會作為文字進入。
chars (text: string, start: number, end: number) {
// 判斷有沒有父元素
if (!currentParent) {
if (process.env.NODE_ENV !== 'production') {
if (text === template) {
warnOnce(
'Component template requires a root element, rather than just text.',
{ start }
)
} else if ((text = text.trim())) {
warnOnce(
`text "${text}" outside root element will be ignored.`,
{ start }
)
}
}
return
}
// IE textarea placeholder bug
/* istanbul ignore if */
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text
) {
return
}
// 儲存下currentParent的子元素
const children = currentParent.children
if (inPre || text.trim()) {
text = isTextTag(currentParent) ? text : decodeHTMLCached(text)
} else if (!children.length) {
// remove the whitespace-only node right after an opening tag
text = ''
} else if (whitespaceOption) {
if (whitespaceOption === 'condense') {
// in condense mode, remove the whitespace node if it contains
// line break, otherwise condense to a single space
text = lineBreakRE.test(text) ? '' : ' '
} else {
text = ' '
}
} else {
text = preserveWhitespace ? ' ' : ''
}
if (text) {
if (whitespaceOption === 'condense') {
// condense consecutive whitespaces into single space
text = text.replace(whitespaceRE, ' ')
}
let res
let child: ?ASTNode
// 解析文字，動態屬性情況
if (!inVPre && text !== ' ' && (res = parseText(text, delimiters))) {
child = {
type: 2,
expression: res.expression,
tokens: res.tokens,
text
}
} else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
child = {
type: 3,
text
}
}
if (child) {
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
child.start = start
child.end = end
}
children.push(child)
}
}
}
複製程式碼comment
生成註釋ast的函式還是比較簡單的，設定type=3為註釋型別，把text放入物件中然後push到currentParent.children
comment (text: string, start, end) {
const child: ASTText = {
type: 3,
text,
isComment: true
}
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
child.start = start
child.end = end
}
currentParent.children.push(child)
}
複製程式碼end
最後例子進入到end鉤子
end (tag, start, end) {
const element = stack[stack.length - 1]
if (!inPre) {
// 刪除無用的最後一個空註釋節點
const lastNode = element.children[element.children.length - 1]
if (lastNode && lastNode.type === 3 && lastNode.text === ' ') {
element.children.pop()
}
}
// 修改棧，讓父級變成上一級
stack.length -= 1
currentParent = stack[stack.length - 1]
if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
element.end = end
}
// 關閉當前元素
closeElement(element)
},
複製程式碼到這個結尾可以看一下現在返回的root也就是ast是什麼樣子，和預想中的基本一致。
這樣其實我們已經把js物件生成ast的過程已經完整的走了一遍，我建議大家還是自己去對著原始碼跑一個例子看一下，看看整個流程會對自身對原始碼理解更加深入一些。
結尾
本文主要圍繞著Vue的parse過程進行解析，這個文中肯定會有一些不夠嚴謹的思考和錯誤，歡迎大家指正，有興趣歡迎一起探討和改進~