26 | advanceSpaces () {
27 | // 匹配空白字符
28 | const match = /^[\t\r\n\f ]+/.exec(context.source)
29 | if (match) {
30 | // 调用 advanceBy 函数消费空白字符
31 | context.advanceBy(match[0].length)
32 | }
33 | }
34 | }
35 |
36 | // 调用 parseChildren 函数开始进行解析，它返回解析后得到的子节点
37 | // parseChildren 函数接收两个参数：
38 | // 1. 上下文对象 context
39 | // 2. 由父节点构成的代码栈，初始时栈为空
40 | const nodes = parseChildren(context, [])
41 |
42 | // 解析器返回 Root 根节点
43 | return {
44 | type: 'Root',
45 | // 使用 nodes 作为根节点的 children
46 | children: nodes
47 | }
48 | }
49 |
50 | function parseChildren (context, ancestors) {
51 | // 定义 nodes 数组存储子节点，它将作为最终的返回值
52 | let nodes = []
53 | // 从上下文对象中取得当前状态，包括模式 mode 和模板内容 source
54 | const { mode, source } = context
55 |
56 | // 开启 while 循环，只要满足条件就会一直对字符串进行解析
57 | // 关于 isEnd() 后文会详细讲解
58 | while (!isEnd(context, ancestors)) {
59 | let node
60 | // 只有 DATA 模式和 RCDATA 模式才支持插值节点的解析
61 | if (mode === TextModes.DATA || mode === TextModes.RCDATA) {
62 | // 只有 DATA 模式才支持标签节点的解析
63 | if (mode === TextModes.DATA && source[0] === '<') {
64 | if (source[1] === '!') {
65 | if (source.starsWith('
24 |
{{ foo.bar }}
25 |