compile——生成ast

刘涛

生成ast的函数是src/compiler/parser/index.js文件中的parse函数，

从这里入手，我们一起来看看一段html字符串，是如何一步步转换成抽象语法树的。

这一部分会涉及到许许多多的正则匹配，知道每个正则有什么用途，会更加方便之后的分析。

（ 这些正则真是高， 以前想写， 写不出来  ）

正则表达式

src/compiler/parser/index.js

export const onRE = /^@|^v-on:/
export const dirRE = /^v-|^@|^:/
export const forAliasRE = /(.*?)\s+(?:in|of)\s+(.*)/
export const forIteratorRE = /\((\{[^}]*\}|[^,]*),([^,]*)(?:,([^,]*))?\)/

const argRE = /:(.*)$/
const bindRE = /^:|^v-bind:/
const modifierRE = /\.[^.]+/g

这一部分的几个正则很简单，我们简单过一下。

onRE是匹配@或v-on开头的属性，也就是我们添加事件的语法。

dirRE是匹配v-或@或:开头的属性，即vue中的绑定数据或事件的语法。

forAliasRE匹配v-for中的属性值，比如item in items、(item, index) of items。

forIteratorRE是对forAliasRE中捕获的第一部分内容，进行拆解，我们都知道v-for中in|of前最后可以有三个逗号分隔的参数。

argRE匹配并捕获:开头的属性。

bindRE匹配:或v-bind开头的属性，即绑定数据的语法。

modifierRE是匹配@click.stop、@keyup.enter等属性中的修饰符 .stop   .enter。

src/compiler/parser/html-parser.js

这部分内容的正则表达式比较复杂，相信很多人看到这些都一个头两个大。

由于我的水平也比较有限，马马虎虎带大家过一下这些正则。

前面几行是定义了匹配属性的正则。

// Regular Expressions for parsing tags and attributes
const singleAttrIdentifier = /([^\s"'<>/=]+)/
const singleAttrAssign = /(?:=)/
const singleAttrValues = [
  // attr value double quotes
  /"([^"]*)"+/.source,
  // attr value, single quotes
  /'([^']*)'+/.source,
  // attr value, no quotes
  /([^\s"'=<>`]+)/.source
]
const attribute = new RegExp(
  '^\\s*' + singleAttrIdentifier.source +
  '(?:\\s*(' + singleAttrAssign.source + ')' +
  '\\s*(?:' + singleAttrValues.join('|') + '))?'
)

第一个singleAttrIdentifier  

/([^\s"'<>/=]+)/ 

比较简单，它是匹配一个或多个非空白字符，非"'<>/=字符，

并捕获匹配到的内容，主要用于匹配属性名。

例如：

"/abc'de<".match(singleAttrIdentifier)
// ["abc", "abc", index: 1, input: "/abc'de<"]

第二个singleAttrAssign，更简单，就是匹配一个=，但不捕获。

const singleAttrValues = [
  // attr value double quotes
  /"([^"]*)"+/.source,
  // attr value, single quotes
  /'([^']*)'+/.source,
  // attr value, no quotes
  /([^\s"'=<>`]+)/.source
]

第三个singleAttrValues主要用于匹配属性值，因为我们的属性值可以包含在单引号或双引号内，也可以不用引号。所以这里分为三种情况：

1、双引号括起来/"([^"]*)"+/.source。主要是捕获双引号括起来的非"内容。

2、单引号括起来/'([^']*)'+/.source。主要是捕获双引号括起来的非'内容。

3、没有引号/([^\s"'=<>]+)/.source。捕获多个非空白字符或非"'=<>``字符的内容。

const attribute = new RegExp(
  '^\\s*' + singleAttrIdentifier.source +
  '(?:\\s*(' + singleAttrAssign.source + ')' +
  '\\s*(?:' + singleAttrValues.join('|') + '))?'
)

最后一个是把前三个整合起来，用于匹配一个完整的属性，并且允许属性名、等号、属性值之前可以有多个空白字符。

列举几个符合的例子：

"href='https://www.imliutao.com'".match(attribute)
// ["href='https://www.imliutao.com'", "href", "=", undefined, "https://www.imliutao.com", undefined, index: 0, input: "href='https://www.imliutao.com'"]
// 上例中把单引号和双引号互换，结果一样

// 我们在属性名、等号、属性值之前加了空格，我们依然可以正确匹配捕获键和值。
" href = 'https://www.imliutao.com'".match(attribute)
// [" href = "https://www.imliutao.com"", "href", "=", "https://www.imliutao.com", undefined, undefined, index: 0, input: " href = "https://www.imliutao.com""]

// 去掉属性值的引号
' href =https://www.imliutao.com'.match(attribute)
// [" href =https://www.imliutao.com", "href", "=", undefined, undefined, "https://www.imliutao.com", index: 0, input: " href =https://www.imliutao.com"]

上面列出来的三个例子，最终匹配的结果数组中https://www.imliutao.com的位置变换了，

这是因为我们匹配属性值时有三种情况，3-5依次为双引号、单引号、没有引号的捕获结果。

接着一组，是用来匹配起始标签的标签名。

const ncname = '[a-zA-Z_][\\w\\-\\.]*'
const qnameCapture = '((?:' + ncname + '\\:)?' + ncname + ')'
const startTagOpen = new RegExp('^<' + qnameCapture)

ncname匹配的是以a-zA-Z_开头，然后是0或多个a-zA-Z_、-或.。

qnameCapture匹配ncname开头，紧跟着一个冒号，然后又跟着一个ncname，捕获整体匹配的内容。

startTagOpen也很明了，其实就是匹配起始标签，我们的标签有字母、下划线、中划线或点组成，因为可能有命名空间，所以有了qnameCapture。

例子如下：

'<a href="http://www.imliutao.com">刘涛的个人小站</a>'.match(startTagOpen)
// ["<a", "a", index: 0, input: "<a href="http://www.imliutao.com">刘涛的个人小站</a>"]

'<svg:path />'.match(startTagOpen)
// ["<svg:path", "svg:path", index: 0, input: "<svg:path />"]

'<svg:path.test />'.match(startTagOpen)
// ["<svg:path.test", "svg:path.test", index: 0, input: "<svg:path.test />"]

'<-svg:path />'.match(startTagOpen)
// null

接着startTagClose比较简单，用于匹配起始标签的结束部分，这里做了单标签的区分，单标签匹配的第二个元素是/，如下：

const startTagClose = /^\s*(\/?)>/
' />'.match(startTagClose)
// [" />", "/", index: 0, input: " />"]

' >'.match(startTagClose)
// [" >", "", index: 0, input: " >"]

endTag是匹配双标签的结束标签。以<开始，然后是/，然后是标签名qnameCapture，接着是0或多个非>，最后是>。其中捕获是qnameCapture进行的。

const endTag = new RegExp('^<\\/' + qnameCapture + '[^>]*>')

'</div>'.match(endTag)
// ["</div>", "div", index: 0, input: "</div>"]

'</div    >'.match(endTag)
// ["</div    >", "div", index: 0, input: "</div    >"]

' </div    >'.match(endTag)
// null

最后三个比较简单，doctype是匹配文档类型，comment匹配html注释的起始部分，conditionalComment匹配<![CDATA等内容。

const doctype = /^<!DOCTYPE [^>]+>/i
const comment = /^<!--/
const conditionalComment = /^<!\[/

-->

src/compiler/parser/text-parser.js

const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g
const regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g

defaultTagRE是默认的模板分隔符匹配。

regexEscapeRE用于匹配需要转义的字符。

src/compiler/parser/filter-parser.js

validDivisionCharRE = /[\w).+\-_$\]]/

这个也比较简单，就是匹配字母数字及列出的字符，具体用途是判断表达式是不是正则时用到，具体我们讲解filter时深入分析。

编译模板

光看代码，毕竟无聊又生硬，我们还是从一个简单的例子出发，来过一下最基本的流程。

例子如下：

var vm = new Vue({
    el: '#app',
    template: '<div id="app">\
      　　　　　　这里是文本<箭头之后的文本\
      　　　　　　<a :href="url" target="_blank" >前面的文本{{title}}后面的文本</a>\
      　　　　　　<img :src="img" />\
    　　　　　　</div>',
    data: {
      url: 'https://www.imliutao.com',
      title: '刘涛的个人小站',
      img: 'https://pic1.zhimg.com/092406f3919e915fffc7ef2f2410e560_is.jpg'
    }
  })
</script>

我们先看一眼parse方法的实现。

export function parse (
  template: string,
  options: CompilerOptions
): ASTElement | void {
  warn = options.warn || baseWarn

  platformGetTagNamespace = options.getTagNamespace || no  // 获取tag的命名空间，svg或math
  platformMustUseProp = options.mustUseProp || no // 判断是否需要通过绑定prop来绑定属性
  platformIsPreTag = options.isPreTag || no  // 是不是pre标签
  preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  transforms = pluckModuleFunction(options.modules, 'transformNode')
  postTransforms = pluckModuleFunction(options.modules, 'postTransformNode') 
  delimiters = options.delimiters  // 分隔符

  const stack = []
  const preserveWhitespace = options.preserveWhitespace !== false
  let root
  let currentParent
  let inVPre = false
  let inPre = false
  let warned = false

  function warnOnce (msg) {
    if (!warned) {
      warned = true
      warn(msg)
    }
  }

  function endPre (element) {
    // check pre state
    if (element.pre) {
      inVPre = false
    }
    if (platformIsPreTag(element.tag)) {
      inPre = false
    }
  }

  parseHTML(template, {
    warn,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,  // 是否是单标签
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    start (tag, attrs, unary) {
      ...
    },

    end () {
      ...
    },

    chars (text: string) {
      ...
    }
  })
  return root
}

最开始保存了一系列options传入的方法等，这些内容我们在上一篇文章中提到过，

这里就不多说了。接着定义了一些变量和内部方法。

然后是一个很长很长的函数调用parseHTML，对整个模板的解析，都是在这里进行的。

我们来看parseHTML的实现。

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) {
    ...
  }

  // Clean up any remaining tags
  parseEndTag()

  function advance (n) {
    ...
  }

  function parseStartTag () {
    ...
  }

  function handleStartTag (match) {
    ...
  }

  function parseEndTag (tagName, start, end) {
    ...
  }
}

刚开始也是先定义一堆变量，然后开始了一个大循环。Let us go!

round one

第一次循环html就是我们的模板，last用于保存还没有解析的模板部分。

lastTag为undefined，所以!lastTag为true。textEnd = html.indexOf('<')为0。

里面大量用到了advance方法，先说一下它是干啥的。

  function advance (n) {
    index += n
    html = html.substring(n)
  }

它只是把html从n位置开始截取，并且记录索引index的位置。

// 过滤掉注释，doctype等
// Comment:
if (comment.test(html)) {
  const commentEnd = html.indexOf('-->')

  if (commentEnd >= 0) {
    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
}

接着过滤文档类型标示的字符串。以上内容我们模板都没有，所以直接跳过。

const endTagMatch = html.match(endTag)

if (endTagMatch) {
  const curIndex = index
  advance(endTagMatch[0].length)
  parseEndTag(endTagMatch[1], curIndex, index)
  continue
}

endTag匹配结束的标签，这里匹配结果为null。

const startTagMatch = parseStartTag()
if (startTagMatch) {
  handleStartTag(startTagMatch)
  continue
}

这里执行了parseStartTag函数。我们看看它做了什么。

  function parseStartTag () {
    // 匹配标签名
    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
      }
    }
  }

html.match(startTagOpen)返回内容如下：

["<div", "div", index: 0, input: "<div id="app">↵	这里是文本<箭头之后的文本↵	<a :href="url" t…t="_blank">{{title}}</a>↵	<img :src="img">↵</div>"]

此时start是一个数组，match就是：

match = {
	tagName: "div",
	attrs: [],
	start: 0 // index是parseHTML内部全局变量
}

advance(start[0].length)后html截去前四个字符。

while循环中主要是匹配属性知道起始标签结束，我们这里只有一个id="app"。

end匹配结果如下：

[">", "", index: 0, input: ">↵	这里是文本<箭头之后的文本↵	<a :href="url" target="_blank">{{title}}</a>↵	<img :src="img">↵</div>"]

所以最终match如下：

match = {
	tagName: "div",
	attrs: [[" id="app"", "id", "=", "app", undefined, undefined, index: 0, input: " id="app"> 	这里是文本<箭头之后的文本 	<a :href="url" target="_blank">{{title}}</a>	<img :src="img"> </div>"]],
	start: 0,
	end: 14,
	unarySlash: ""
}

之后会把match传给handleStartTag函数处理。

  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) || tagName === 'html' && lastTag === 'head' || !!unarySlash

    const l = match.attrs.length
    const attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      const args = match.attrs[i]
      // 上面讲正则的时候，提到过3、4、5分别为双引号、单引号、没有引号的捕获结果。
      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] || ''
      attrs[i] = {
        name: args[1],
        value: decodeAttr(
          value,
          options.shouldDecodeNewlines
        )
      }
    }

    if (!unary) {
      stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs })
      lastTag = tagName
    }

    if (options.start) {
      options.start(tagName, attrs, unary, match.start, match.end)
    }
  }

细节大家自己看，经过循环处理：

attrs = [{name: "id", value: "app"}]
stack = [{
	attrs,
	lowerCasedTag: "div",
	tag: "div"
}]
lastTag = "div"

我们在parse中传入了start函数，接着会执行start函数，该函数比较长且涉及情况太多，我就不直接粘贴代码了，大家最好对照源码一起看，在每次解析的时候，我会附上本次解析相关代码。

整体分为以下几步：

1、 定义基本的ast结构

2、 对ast进行预处理(preTransforms)

3、 解析v-pre、v-if、v-for、v-once、slot、key、ref等指令。

4、 对ast处理(transforms)

5、 解析v-bind、v-on以及普通属性

6、 根节点或v-else块等处理

7、 模板元素父子关系的建立

8、 对ast后处理(postTransforms)

第一步定义基本的ast结构：

const element1 = {
    type: 1,
    tag: "div",
    attrsList: [{name: "id", value: "app"}],
    attrsMap: {id: "app"},
    parent: undefined,
    children: []
  }

第二步对ast的预处理在weex中才会有，我们直接跳过。

第三步对不同指令的解析，我们之后再分别讲解。

第四步中只有对class和style属性操作。

第五步主要是processAttrs函数。

function processAttrs (el) {
  const list = el.attrsList
  let i, l, name, rawName, value, modifiers, isProp
  for (i = 0, l = list.length; i < l; i++) {
    name = rawName = list[i].name
    value = list[i].value
    // dirRE.test('id') = false
    if (dirRE.test(name)) {
      ...
    } else {
      if (process.env.NODE_ENV !== 'production') {
        const expression = parseText(value, delimiters)
        if (expression) {
          warn(
            `${name}="${value}": ` +
            'Interpolation inside attributes has been removed. ' +
            'Use v-bind or the colon shorthand instead. For example, ' +
            'instead of <div id="{{ val }}">, use <div :id="val">.'
          )
        }
      }
      addAttr(el, name, JSON.stringify(value))
    }
  }
}

parseText函数主要用于解析文本，因为不是Vue指令才会走到else中，这里主要是用于提示用户，不要用id="{{ val }}"这种方式，函数的具体实现，之后解析文本的时候再说。

export function addAttr (el: ASTElement, name: string, value: string) {
  (el.attrs || (el.attrs = [])).push({ name, value })
}

之后ast结构如下：

const element1 = {
    type: 1,
    tag: "div",
    attrsList: [{name: "id", value: "app"}],
    attrsMap: {id: "app"},
    parent: undefined,
    children: [],
    plain: false,
    attrs: [{name: "id", value: "'app'"}]
  }

第六步root还是undefined，所以执行root = element并验证根节点是否合法。

    if (!root) {
      root = element
      checkRootConstraints(root)
    } else if (!stack.length) {
      ...
    }

第七步，

// currentParent = undefined
if (currentParent && !element.forbidden) {
  if (element.elseif || element.else) {
    processIfConditions(element, currentParent)
  } else if (element.slotScope) { // scoped slot
    currentParent.plain = false
    const name = element.slotTarget || '"default"'
    ;(currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
  } else {
    currentParent.children.push(element)
    element.parent = currentParent
  }
}
if (!unary) {
  currentParent = element
  stack.push(element)
} else {
  endPre(element)
}

执行完这一步，currentParent值为element1，且stack栈中有了一个元素element1。

第八步没有任何操作。

round two

start函数执行完之后，我们再回到parseHTML中，接着会再次执行while循环。

此时html字符串的<div id="app">部分已经被截掉，只剩下后半部分。!isPlainTextElement('div') == true所以还是会走if。

接着继续查找<的位置，如下：

let textEnd = html.indexOf('<')  // 20

所以会直接跳过下面的if块。

let text, rest, next
if (textEnd >= 0) {
  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)
}

这里vue其实会对文本中的小于号进行处理，如果文本中包含了<，rest会等于从<开始的文本，

然后如果rest不是结束标签、不是起始标签、不是注释，则说明它在文本中，之后跳过<继续向后寻找，以此循环。

text用与保存文本，这里是这里是文本<箭头之后的文本。

if (textEnd < 0) {
  text = html
  html = ''
}

if (options.chars && text) {
  options.chars(text)
}

options.chars用于解析文本，我们接着回到parse函数中。

chars函数比较简单，主要分两种情况，一种是文本需要解析，一种是纯文本，我们这里是纯文本，所以整体的ast变为：

const element1 = {
    type: 1,
    tag: "div",
    attrsList: [{name: "id", value: "app"}],
    attrsMap: {id: "app"},
    parent: undefined,
    children: [{
        type: 3,
        text: '这里是文本<箭头之后的文本'
      }],
    plain: false,
    attrs: [{name: "id", value: "'app'"}]
  }

再回到parseHTML函数，这时html又被截去了上面的文本，所以和last不相等，再次执行循环。

round three

这一次的循环与第一次很类似，因为是a标签的起始部分，所以同样会走到：

const startTagMatch = parseStartTag()
if (startTagMatch) {
  handleStartTag(startTagMatch)
  continue
}

parseStartTag的解析过程上面已经说过，这里返回的值为：

startTagMatch =  {
  tagName: "a",
  attrs: [[" :href="url"", ":href", "=", "url", undefined, undefined, index: 0, input: " :href="url" target="_blank">{{title}}</a>↵ <img :src="img">↵</div>"], [" target="_blank"", "target", "=", "_blank", undefined, undefined, index: 0, input: " target="_blank">{{title}}</a>↵  <img :src="img">↵</div>"]],
  start: 34,
  end: 65,
  unarySlash: ""
}

接着也同样交给handleStartTag函数处理，具体过程也不再赘述，这其中，stack和lastTag的值改变了。

stack = [{
  attrs: [{name: "id", value: "app"}]
  lowerCasedTag: "div",
  tag: "div"
},{
  attrs: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}]
  lowerCasedTag: "a",
  tag: "a"
}]
lastTag = "a"

start函数也会再次执行，同样按照刚才的步骤来：

第一步定义基本的ast结构：

const element2 = {
    type: 1,
    tag: 'a',
    attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
    attrsMap: {':href': 'url', 'target': '_blank'},
    parent: element1,
    children: []
  };

第二步到第四步这里同样没有操作。

第五步processAttrs函数中多了绑定属性的判断。

function processAttrs (el) {
  const list = el.attrsList
  let i, l, name, rawName, value, modifiers, isProp
  for (i = 0, l = list.length; i < l; i++) {
    name = rawName = list[i].name
    value = list[i].value
    // dirRE.test(':href') = true
    if (dirRE.test(name)) {
      el.hasBindings = true
      // 解析修饰符
      modifiers = parseModifiers(name)
      if (modifiers) {
        name = name.replace(modifierRE, '')
      }
      if (bindRE.test(name)) { // v-bind
        name = name.replace(bindRE, '')
        value = parseFilters(value)  // filter的解析，这里也没有
        ...
        if (isProp || platformMustUseProp(el.tag, el.attrsMap.type, name)) {
          addProp(el, name, value)
        } else {
          addAttr(el, name, value)
        }
      } else if (onRE.test(name)) { // v-on
        ...
      } else { // normal directives
        ...
      }
    } else {
      ...
    }
  }
}

之后ast结构如下：

const element2 = {
  type: 1,
  tag: 'a',
  attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
  attrsMap: {':href': 'url', 'target': '_blank'},
  attrs: [{name: "href", value: "url"}, {name: "target", value: "'_blank'"}],
  parent: 外层div的ast,
  children: [],
  hasBindings: true,
  plain: false
};

第六步都不符合，直接跳过。

第七步，

if (currentParent && !element.forbidden) {
  if (element.elseif || element.else) {
    ...
  } else if (element.slotScope) { // scoped slot
    ...
  } else {
    currentParent.children.push(element)
    element.parent = currentParent
  }
}
if (!unary) {
  currentParent = element
  stack.push(element)
} else {
  endPre(element)
}

执行完这一步，currentParent、stack以及整个模板的ast如下：

  currentParent = element2
  stack = [element1, element2]
  element1 = {
    type: 1,
    tag: "div",
    attrsList: [{name: "id", value: "app"}],
    attrsMap: {id: "app"},
    parent: undefined,
    children: [{
        type: 3,
        text: '这里是文本<箭头之后的文本'
      },
      element2
    ],
    plain: false,
    attrs: [{name: "id", value: "'app'"}]
  }

第八步还是没有任何操作。

round four

这一次循环和第二次循环类似，都是解析文本，然后传入options.chars函数。与第二次不同的是，这次解析出来的文本是前面的文本{{title}}后面的文本，它绑定了数据title。

在chars函数中，会走到如下流程：

if (!inVPre && text !== ' ' && (expression = parseText(text, delimiters))) {
  children.push({
    type: 2,
    expression,
    text
  })
}

我们来看看parseText函数：

export function parseText (
  text: string,
  delimiters?: [string, string]
): string | void {
  const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE
  if (!tagRE.test(text)) {
    return
  }
  const tokens = []
  let lastIndex = tagRE.lastIndex = 0
  let match, index
  // match = match = ["{{title}}", "title", index: 5, input: "前面的文本{{title}}后面的文本"]
  while ((match = tagRE.exec(text))) {
    index = match.index
    // push text token
    if (index > lastIndex) {
      tokens.push(JSON.stringify(text.slice(lastIndex, index)))
    }
    // tag token
    const exp = parseFilters(match[1].trim())
    tokens.push(`_s(${exp})`)
    lastIndex = index + match[0].length
  }
  if (lastIndex < text.length) {
    tokens.push(JSON.stringify(text.slice(lastIndex)))
  }
  return tokens.join('+')
}

整个函数还是比较简单的，首先判断text中有没有分隔符，没有就直接返回，这也是第二步中没有走到这个循环的原因。

在parseText中的while循环把我们的文本分为"前面的文本"、{{title}}、"后面的文本"三部分，

并对绑定数据的部分通过filter处理，包裹为_s(${exp})，_s是什么在vdom里面我们再做解释，最后返回的值为"前面的文本"+_s(title)+"后面的文本"。

到这里，我们整个模板的ast变为如下：

element1 = {
  type: 1,
  tag: "div",
  attrsList: [{name: "id", value: "app"}],
  attrsMap: {id: "app"},
  parent: undefined,
  children: [{
      type: 3,
      text: '这里是文本<箭头之后的文本'
    },
    {
      type: 1,
      tag: 'a',
      attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
      attrsMap: {':href': 'url', 'target': '_blank'},
      attrs: [{name: "href", value: "url"}, {name: "target", value: "'_blank'"}],
      parent: element1,
      children: [{
        type: 2,
        expression: '"前面的文本"+_s(title)+"后面的文本"',
        text: '前面的文本{{title}}后面的文本'
      }],
      hasBindings: true,
      plain: false
    }
  ],
  plain: false,
  attrs: [{name: "id", value: "'app'"}]
}

round five

再一次回到parseHTML中的while循环，这时我们的html还剩下</a><img :src="img"></div>。

显然这回会走到endTagMatch

const endTagMatch = html.match(endTag)
// ["</a>", "a", index: 0, input: "</a>↵  <img :src="img">↵</div>"]
if (endTagMatch) {
  const curIndex = index
  advance(endTagMatch[0].length)
  parseEndTag(endTagMatch[1], curIndex, index)
  continue
}

我们这一次走进parseEndTag来一探究竟：

  // tagName = 'a', start = 84, end = 88
  function parseEndTag (tagName, start, end) {
    let pos, lowerCasedTagName
    if (start == null) start = index
    if (end == null) end = index

    if (tagName) {
      lowerCasedTagName = tagName.toLowerCase()
    }

    if (tagName) {
      // 寻找最近的起始`a`标签
      for (pos = stack.length - 1; pos >= 0; pos--) {
        if (stack[pos].lowerCasedTag === lowerCasedTagName) {
          break
        }
      }
    } else {
      pos = 0
    }

    if (pos >= 0) {
      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
      stack.length = pos
      lastTag = pos && stack[pos - 1].tag
    } else if (lowerCasedTagName === 'br') {
      ...
    } else if (lowerCasedTagName === 'p') {
      ...
    }
  }

上面的代码，我们会走到options.end中，我们返回parse中，看一看这个方法干了啥。

end () {
  // remove trailing whitespace
  const element = stack[stack.length - 1]
  const lastNode = element.children[element.children.length - 1]
  if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
    element.children.pop()
  }
  // pop stack
  stack.length -= 1
  currentParent = stack[stack.length - 1]
  endPre(element)
}

代码很短，看着就神清气爽，它其实就是一个简单的出栈操作，具体过程如下：

1、取出stack中的最后一个元素。

2、取出该元素的最后一个子元素。

3、如果最后一个子元素是纯文本' '则删除，这是因为我们的模板一般都会缩进，都会有换行，所以这里是清除换行等添加的内容。

4、stack长度减一

5、currentParent变为栈中最后一个元素

6、 处理v-pre或pre的结束标签

这时stack和currentParent分别变为：

stack = [element1]
currentParent = element

回到parseEndTag中，同样也做了一个出栈的操作：

stack长度变为pos，lastTag变为栈中最后一个元素的tag，又回到了：

stack = [{
  attrs: [{name: "id", value: "app"}]
  lowerCasedTag: "div",
  tag: "div"
}]
lastTag = "div"

round six

这一次因为我们的换行，所以会给div添加一个空的纯文本结点，也就是end中要去掉的' '文本结点，模板ast变为：

element1 = {
  type: 1,
  tag: "div",
  attrsList: [{name: "id", value: "app"}],
  attrsMap: {id: "app"},
  parent: undefined,
  children: [{
      type: 3,
      text: '这里是文本<箭头之后的文本'
    },
    {
      type: 1,
      tag: 'a',
      attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
      attrsMap: {':href': 'url', 'target': '_blank'},
      attrs: [{name: "href", value: "url"}, {name: "target", value: "'_blank'"}],
      parent: element1,
      children: [{
        type: 2,
        expression: '"前面的文本"+_s(title)+"后面的文本"',
        text: '前面的文本{{title}}后面的文本'
      }],
      hasBindings: true,
      plain: false
    },
    {
      text: " ",
      type: 3
    }
  ],
  plain: false,
  attrs: [{name: "id", value: "'app'"}]
}

round seven

这次我们又会走到startTagMatch:

const startTagMatch = parseStartTag()
if (startTagMatch) {
  handleStartTag(startTagMatch)
  continue
}

这一次由于我们的img是一个单标签，所以startTagMatch如下：

startTagMatch =  {
  tagName: "img",
  attrs: [[" :src="img"", ":src", "=", "img", undefined, undefined, index: 0, input: " :src="img" />    </div>"]],
  start: 91,
  end: 109,
  unarySlash: "/"
}

因为单标签不会包含其他内容，所以不会影响栈的深度。

在handleStartTag处理时，单标签会直接执行start函数，跳过stack和lastTag的修改。

在start函数中，单标签和双标签的区别也是直接跳过stack和currentParent，属性的解析都相同，这时整个模板的ast又有所改变了。

element1 = {
  type: 1,
  tag: "div",
  attrsList: [{name: "id", value: "app"}],
  attrsMap: {id: "app"},
  parent: undefined,
  children: [{
      type: 3,
      text: '这里是文本<箭头之后的文本'
    },
    {
      type: 1,
      tag: 'a',
      attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
      attrsMap: {':href': 'url', 'target': '_blank'},
      attrs: [{name: "href", value: "url"}, {name: "target", value: "'_blank'"}],
      parent: element1,
      children: [{
        type: 2,
        expression: '"前面的文本"+_s(title)+"后面的文本"',
        text: '前面的文本{{title}}后面的文本'
      }],
      hasBindings: true,
      plain: false
    },
    {
      text: " ",
      type: 3
    },
    {
      type: 1,
      tag: 'img',
      attrsList: [{name: ":src", value: "img"}],
      attrsMap: {':src': 'img'},
      attrs: [{name: "src", value: "url"}],
      parent: element1,
      children: [],
      hasBindings: true,
      plain: false
    }
  ],
  plain: false,
  attrs: [{name: "id", value: "'app'"}]
}

round eight

这一次与第六次循环一模一样，同样添加了一个空文本子节点，模板ast变为：

element1 = {
  type: 1,
  tag: "div",
  attrsList: [{name: "id", value: "app"}],
  attrsMap: {id: "app"},
  parent: undefined,
  children: [{
      type: 3,
      text: '这里是文本<箭头之后的文本'
    },
    {
      type: 1,
      tag: 'a',
      attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
      attrsMap: {':href': 'url', 'target': '_blank'},
      attrs: [{name: "href", value: "url"}, {name: "target", value: "'_blank'"}],
      parent: element1,
      children: [{
        type: 2,
        expression: '"前面的文本"+_s(title)+"后面的文本"',
        text: '前面的文本{{title}}后面的文本'
      }],
      hasBindings: true,
      plain: false
    },
    {
      text: " ",
      type: 3
    },
    {
      type: 1,
      tag: 'img',
      attrsList: [{name: ":src", value: "img"}],
      attrsMap: {':src': 'img'},
      attrs: [{name: "src", value: "url"}],
      parent: element1,
      children: [],
      hasBindings: true,
      plain: false
    },
    {
      text: " ",
      type: 3
    }
  ],
  plain: false,
  attrs: [{name: "id", value: "'app'"}]
}

round nine

这一次，找到了我们整个模板的闭合标签，然后执行end函数，最终生成的ast就是：

element1 = {
  type: 1,
  tag: "div",
  attrsList: [{name: "id", value: "app"}],
  attrsMap: {id: "app"},
  parent: undefined,
  children: [{
      type: 3,
      text: '这里是文本<箭头之后的文本'
    },
    {
      type: 1,
      tag: 'a',
      attrsList: [{name: ":href", value: "url"}, {name: "target", value: "_blank"}],
      attrsMap: {':href': 'url', 'target': '_blank'},
      attrs: [{name: "href", value: "url"}, {name: "target", value: "'_blank'"}],
      parent: element1,
      children: [{
        type: 2,
        expression: '"前面的文本"+_s(title)+"后面的文本"',
        text: '前面的文本{{title}}后面的文本'
      }],
      hasBindings: true,
      plain: false
    },
    {
      text: " ",
      type: 3
    },
    {
      type: 1,
      tag: 'img',
      attrsList: [{name: ":src", value: "img"}],
      attrsMap: {':src': 'img'},
      attrs: [{name: "src", value: "url"}],
      parent: element1,
      children: [],
      hasBindings: true,
      plain: false
    }
  ],
  plain: false,
  attrs: [{name: "id", value: "'app'"}]
}

结语

至此，我们通过一个保护绑定属性、包含纯文本、包含文本模板、包含单标签、包含双标签的实例，

一步一步详细的分析了把html字符串解析为ast的过程。之后对于各种复杂的指令等，我们单独讲解。