.'
)
}
}
el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
}
const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
if (styleBinding) {
el.styleBinding = styleBinding
}
}
```
可以看到，用来处理 `style` 属性的 `transformNode` 函数基本与用来处理 `class` 属性的 `transformNode` 函数相同，这里大家要额外注意如下这句代码：
```js
el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
```
与 `class` 属性不同，如果一个标签使用了非绑定的 `style` 属性，则会使用 `parseStyleText` 函数对属性值进行处理，`parseStyleText` 函数来自 `src/platforms/web/util/style.js` 文件，那么 `parseStyleText` 函数会如何处理非绑定的 `style` 属性值呢？举个例子，如下模板所示：
```html
```
如上模板中使用了非绑定的 `style` 属性，属性值为字符串 `'color: red; background: green;'`，`parseStyleText` 函数会把这个字符串解析为对象形式，如下：
```js
{
color: 'red',
background: 'green'
}
```
最后再使用 `JSON.stringify` 函数将如上对象变为字符串后赋值给元素描述对象的 `el.staticStyle` 属性。
我们来看一下 `parseStyleText` 函数是如何将样式字符串解析为对象的，如下是 `parseStyleText` 函数的源码：
```js
export const parseStyleText = cached(function (cssText) {
const res = {}
const listDelimiter = /;(?![^(]*\))/g
const propertyDelimiter = /:(.+)/
cssText.split(listDelimiter).forEach(function (item) {
if (item) {
var tmp = item.split(propertyDelimiter)
tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
}
})
return res
})
```
由以上代码可知 `parseStyleText` 函数是由 `cached` 函数创建的高阶函数，`parseStyleText` 接收内联样式字符串作为参数并返回解析后的对象。在 `parseStyleText` 函数内部首先定义了 `res` 常量，该常量就会作为 `parseStyleText` 函数的返回值，其初始值是一个空对象，接着定义了两个正则常量 `listDelimiter` 和 `propertyDelimiter`，其实把一个内联样式字符串解析为对象的思路很简单，首先我们要找到样式字符串的规则，如下：
```js
```
可以看到在样式字符串中分号(`;`)用来作为每一条样式规则的分割，而冒号(`:`)则用来一条样式规则中属性名与值的分割，所以我们有如下思路：
* 1、使用分号(`;`)把样式字符串分割为一个数组，数组中的每个元素都是一条样式规则，以如上模板为例，分割后的数组应该是：
```js
[
'color: red',
'background: green'
]
```
接着遍历该数组，对于每一条样式规则使用冒号(`:`)将其属性名与值再次进行分割，这样我们就能够得到想要的结果了。明白了这个思路再去看 `parseStyleText` 函数的代码就会很容易理解。
对于 `parseStyleText` 函数的逻辑我们不做过多解释，这里我们重点来说一下 `listDelimiter` 正则，如下：
```js
const listDelimiter = /;(?![^(]*\))/g
```
该正则表达式使用了 **正向否定查找(`(?!`)**，什么是正向否定查找呢？举个例子，正则表达式 `/a(?!b)/`用来匹配后面没有跟字符 `'b'` 的字符 `'a'`。所以如上正则表达式用来全局匹配字符串中的分号(`;`)，但是该分号必须满足一个条件，即 **该分号的后面不能跟左圆括号(`)`)，除非有一个相应的右圆括号(`(`)存在**，说起来有点抽象，我们还是举例说明，如下模板所示：
```html
```
大家仔细观察如上 `div` 标签的 `style` 属性值中存在几个分号？答案是三个分号，但只有其中两个分号才是真正的样式规则分割符，而字符串 `'url(www.xxx.com?a=1©=3)'` 中的分号则是不能作为样式规则分割符的，正则常量 `listDelimiter` 正是为了实现这个功能而设计的。有的同学可能会问为什么 `url` 中会带有分号(`;`)，实际上正如上面的例子所示，我们知道内联样式是写在 `html` 文件中的，而在 `html` 规范中存在一个叫做 `html实体` 的概念，我们来看如下这段 `html` 模板：
```html
link
```
这段 `html` 模板在一些浏览器中不能正常工作，这是因为有些浏览器会把 `©` 当做 `html` 实体从而把其解析为字符 `©`，这就导致当你打开该链接时，变成了访问：`foo.cgi?chapter=1©=3`。具体的内容大家可以查看这里：[Ampersands (&'s) in URLs](http://htmlhelp.com/tools/validator/problems.html#amp)。
总之，对于非绑定的 `style` 属性，会在该元素描述对象上添加 `el.staticStyle` 属性，该属性的值是一个字符串化后的对象。接着对于绑定的 `style` 属性，则会使用如下这段代码来处理：
```js
const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
if (styleBinding) {
el.styleBinding = styleBinding
}
```
与处理绑定的 `class` 属性类似，使用 `getBindingAttr` 函数获取到绑定的 `style` 属性值后，如果值存在则直接将其赋值给元素描述对象的 `el.styleBinding` 属性。
以上就是中置处理对于 `style` 属性的处理方式，我们做一个简短的总结：
* 非绑定的 `style` 属性值保存在元素描述对象的 `el.staticStyle` 属性中，假设有如下模板：
```html
```
则该标签元素描述对象的 `el.staticStyle` 属性值为：
```js
el.staticStyle = JSON.stringify({
color: 'red',
background: 'green'
})
```
* 绑定的 `style` 属性值保存在元素描述对象的 `el.styleBinding` 属性中，假设我们有如下模板：
```html
```
则该标签元素描述对象的 `el.styleBinding` 属性值为：
```js
el.styleBinding = "{ fontSize: fontSize + 'px' }"
```
现在前置处理(`preTransformNode`)和中置处理(`transformNode`)我们都讲完了，还剩下后置处理(`postTransformsNode`)没有讲，每当遇到非一元标签的结束标签或遇到一元标签时则会应用后置处理，我们回到 `src/compiler/parser/index.js` 文件，如下高亮的代码所示：
```js {10-12}
function closeElement (element) {
// check pre state
if (element.pre) {
inVPre = false
}
if (platformIsPreTag(element.tag)) {
inPre = false
}
// apply post-transforms
for (let i = 0; i < postTransforms.length; i++) {
postTransforms[i](element, options)
}
}
```
该 `for` 循环遍历了 `postTransforms` 数组，但实际上 `postTransforms` 是一个空数组，因为目前还没有任何后置处理的钩子函数。这里只是暂时提供一个用于后置处理的出口，当有需要的时候可以使用。
## 文本节点的元素描述对象
接下来我们主要讲解当解析器遇到一个文本节点时会如何为文本节点创建元素描述对象，又会如何对文本节点做哪些特殊的处理。我们打开 `src/compiler/parser/index.js` 文件找到 `parseHTML` 函数的 `chars` 钩子函数选项，如下高亮代码所示：
```js {3-5}
parseHTML(template, {
// 省略...
chars (text: string) {
// 省略...
},
// 省略...
})
return root
}
```
当解析器遇到文本节点时，如上代码中的 `chars` 钩子函数就会被调用，并且接收该文本节点的文本内容作为参数。我们来看 `chars` 钩子函数最开始的这段代码：
```js
if (!currentParent) {
if (process.env.NODE_ENV !== 'production') {
if (text === template) {
warnOnce(
'Component template requires a root element, rather than just text.'
)
} else if ((text = text.trim())) {
warnOnce(
`text "${text}" outside root element will be ignored.`
)
}
}
return
}
```
这段代码是连续的几个 `if` 条件语句，首先判断了 `currentParent` 变量是否存在，我们知道 `currentParent` 变量指向的是当前节点的父节点，如果父节点不存在才会执行该 `if` 条件语句里面的代码。大家思考一下，如果 `currentParent` 变量不存在说明什么问题？我们知道如果代码执行到了这里，那么当前节点必然是文本节点，并且该文本节点没有父级节点。什么情况下会出现一个文本节点没有父级节点呢？有两种情况：
* 第一：模板中只有文本节点
```html
我是文本节点
```
如上模板中没有根元素，只有一个文本节点。由于没有元素节点，所以 `currentParent` 变量是肯定不存在值的，而 `Vue` 的模板要求必须要有一个根元素节点才行。当解析器在解析如上模板时，由于模板只有一个文本节点，所以在解析过程中只会调用一次 `chars` 钩子函数，同时将文本节点的内容作为参数传递，此时就会出现一种情况，即：“整个模板的内容与文本节点的内容完全一致”，换句话说 `text === template` 条件成立，这时解析器会打印警告信息提示模板不能只是文本，必须有一个元素节点才行。
* 第二：文本节点在根元素的外面
```html
根元素内的文本节点
根元素外的文本节点
```
我们知道 `currentParent` 变量始终保存的是当前解析节点的父节点，当解析器解析如上模板并遇到根元素外的文本节点时，`currentParent` 变量是不存在的，但是此时条件 `text === template` 是不成立的，这时如下代码会被执行：
```js
else if ((text = text.trim())) {
warnOnce(
`text "${text}" outside root element will be ignored.`
)
}
```
即如果 `text` 是非空的字符串则打印警告信息提示开发者根元素外的文本将会被忽略。
如果模板不符合以上要求则此时 `chars` 钩子函数会立即 `return`，不会继续做后续的工作，如果模板符合要求则将会继续执行如下代码：
```js
// IE textarea placeholder bug
/* istanbul ignore if */
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text
) {
return
}
```
这段代码是用来解决 IE 浏览器中渲染 `