Skip to content

Commit e413566

Browse files
w2xiw2xi
committed
chore: update
1 parent eccd237 commit e413566

File tree

2 files changed

+121
-19
lines changed

2 files changed

+121
-19
lines changed

‎demo/20-parse-template.html

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
<body></body>
22

33
<script>
4+
const NodeTypes = {
5+
// AST
6+
ROOT: 'ROOT',
7+
ELEMENT: 'ELEMENT',
8+
TEXT: 'TEXT',
9+
SIMPLE_EXPRESSION: 'SIMPLE_EXPRESSION',
10+
INTERPOLATION: 'INTERPOLATION',
11+
ATTRIBUTE: 'ATTRIBUTE',
12+
DIRECTIVE: 'DIRECTIVE',
13+
}
14+
415
/**
516
* 模板解析
617
* @param {String} str 模板字符串
@@ -24,7 +35,7 @@
2435
const nodes = parseChildren(context, [])
2536
// 根节点
2637
const root = {
27-
type: 'Root',
38+
type: NodeTypes.ROOT,
2839
children: nodes
2940
}
3041
return root
@@ -80,9 +91,9 @@
8091
advanceBy(2)
8192

8293
return {
83-
type: 'Interpolation',
94+
type: NodeTypes.INTERPOLATION,
8495
content: {
85-
type: 'Expression',
96+
type: NodeTypes.SIMPLE_EXPRESSION,
8697
content
8798
}
8899
}
@@ -141,7 +152,7 @@
141152
advanceBy(1)
142153

143154
return {
144-
type: 'Element',
155+
type: NodeTypes.ELEMENT,
145156
tag,
146157
props,
147158
children: []
@@ -196,7 +207,7 @@
196207
advanceSpaces()
197208

198209
props.push({
199-
type: 'Attribute',
210+
type: NodeTypes.ATTRIBUTE,
200211
name,
201212
value,
202213
isStatic,
@@ -233,7 +244,7 @@
233244
context.advanceBy(content.length)
234245

235246
return {
236-
type: 'Text',
247+
type: NodeTypes.TEXT,
237248
content
238249
}
239250
}
@@ -253,11 +264,10 @@
253264
}
254265
}
255266

256-
console.log('开始解析:')
257-
const ast = parse(
258-
`<div id="foo" class="bar"><p>{{ msg }}</p><p>Template</p></div>`
259-
)
267+
const template = `<div id="foo" class="bar"><p>{{ msg }}</p><p>Template</p></div>`
268+
const ast = parse(template)
260269

270+
console.log('开始解析:', template)
261271
console.log(ast)
262272
console.log(JSON.stringify(ast, null, 2))
263273

‎slides.md

Lines changed: 101 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1125,7 +1125,7 @@ const render = new Function(code) // 渲染函数
11251125

11261126
![template-to-render](public/template-to-render.excalidraw.png)
11271127

1128-
编译器的最终目的就是将**模转换成渲染函数**，而渲染函数的执行会生成虚拟DOM，用于后续的挂载和更新。
1128+
编译器的最终目的就是将**模板转换成渲染函数**，而渲染函数的执行会生成虚拟DOM，用于后续的挂载和更新。
11291129

11301130
---
11311131

@@ -1139,15 +1139,15 @@ const render = new Function(code) // 渲染函数
11391139
const template = `<div class="test"><span>Hello</span></div>`
11401140
```
11411141

1142-
它对应的 AST 结构如下:
1142+
经过解析之后，它对应的 AST 结构如下:
11431143

11441144
```js
11451145
const ast = {
11461146
type: 'Root', // 逻辑根节点
11471147
children: [
11481148
type: 'Element',
11491149
tag: 'div',
1150-
props: { class: 'test' }
1150+
props: [{ type: 'Attribute', name: 'class', value: 'test'}]
11511151
children: [
11521152
{
11531153
type: 'Element',
@@ -1159,6 +1159,98 @@ const ast = {
11591159
}
11601160
```
11611161

1162+
---
1163+
1164+
## 节点类型
1165+
1166+
<div grid="~ cols-2 gap-2">
1167+
1168+
<div>
1169+
1170+
根节点:
1171+
1172+
```js
1173+
{
1174+
type: 'Root',
1175+
children: Array,
1176+
}
1177+
```
1178+
</div>
1179+
1180+
<div>
1181+
1182+
元素节点:
1183+
1184+
```js
1185+
{
1186+
type: 'Element',
1187+
tag: String,
1188+
props: Array,
1189+
children:Array,
1190+
...
1191+
}
1192+
```
1193+
</div>
1194+
1195+
</div>
1196+
1197+
<div grid="~ cols-2 gap-2">
1198+
1199+
<div>
1200+
1201+
属性节点:
1202+
1203+
```js
1204+
{
1205+
type: 'Attribute',
1206+
name: String,
1207+
value: String,
1208+
}
1209+
```
1210+
</div>
1211+
1212+
<div>
1213+
1214+
插值表达式节点:
1215+
1216+
```js
1217+
{
1218+
type: 'Interpolation',
1219+
content: {
1220+
type: 'Expression',
1221+
content: String,
1222+
},
1223+
}
1224+
```
1225+
1226+
</div>
1227+
1228+
</div>
1229+
1230+
---
1231+
1232+
文本节点:
1233+
1234+
```js
1235+
{
1236+
type: 'Text',
1237+
content: String,
1238+
}
1239+
```
1240+
1241+
定义节点类型:
1242+
1243+
```js
1244+
const NodeTypes = {
1245+
ROOT: 'Root',
1246+
ELEMENT: 'Element',
1247+
TEXT: 'Text',
1248+
INTERPOLATION: 'Interpolation',
1249+
ATTRIBUTE: 'Attribute',
1250+
SIMPLE_EXPRESSION: 'SimpleExpression',
1251+
}
1252+
```
1253+
11621254
---
11631255

11641256
## 模板解析器 parser
@@ -1171,7 +1263,7 @@ function parse(str) {
11711263
}
11721264
```
11731265

1174-
解析器的参数是模板字符串，会逐个读取字符串模板的字符，并根据一定的规则将其处理为我们期望的结果。
1266+
解析器的参数是模板字符串，会逐个读取字符串模板的字符，并根据一定的规则提取处有用的信息，并形成一个个节点，最终构成一个 AST。
11751267

11761268
接下来直接上代码，看看是如何处理模板的。
11771269

@@ -1200,7 +1292,7 @@ function parse(str) {
12001292
}
12011293
const nodes = parseChildren(context, [])
12021294
const root = { // 根节点
1203-
type: 'Root',
1295+
type: NodeTypes.ROOT,
12041296
children: nodes
12051297
}
12061298
return root
@@ -1284,9 +1376,9 @@ function parseInterpolation(context) {
12841376
advanceBy(2)
12851377

12861378
return {
1287-
type: 'Interpolation',
1379+
type: NodeTypes.INTERPOLATION ,
12881380
content: {
1289-
type: 'Expression',
1381+
type: NodeTypes.SIMPLE_EXPRESSION,
12901382
content
12911383
}
12921384
}
@@ -1317,7 +1409,7 @@ function parseText(context) {
13171409
context.advanceBy(content.length)
13181410

13191411
return {
1320-
type: 'Text',
1412+
type: NodeTypes.TEXT,
13211413
content
13221414
}
13231415
}
@@ -1376,7 +1468,7 @@ function parseTag(context, type = 'start') {
13761468
advanceBy(1)
13771469

13781470
return {
1379-
type: 'Element',
1471+
type: NodeTypes.ELEMENT,
13801472
tag,
13811473
props,
13821474
children: []

0 commit comments

Comments
 (0)