vue/vue-design @ fd1a6011b702362a28bfe36b0232b0ba4ed87623

Vue 中的 html-parser

打开 src/compiler/parser/html-parser.js 文件，该文件的开头是一段注释：

/**
 * Not type-checking this file because it's mostly vendor code.
 */

/*!
 * 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 的 html parser 的灵感来自于 John Resig 所写的一个开源项目：http://erik.eae.net/simplehtmlparser/simplehtmlparser.js，实际上，我们上一小节所讲的小例子就是在这个项目的基础上所做的修改。Vue 在此基础上做了很多完善的工作，下面我们就探究一下 Vue 中的 html parser 都做了哪些事情。

正则分析

代码正文的一开始，是两句 import 语句，以及定义的一些正则常量：

import { makeMap, no } from 'shared/util'
import { isNonPhrasingTag } from 'web/compiler/util'

// Regular Expressions for parsing tags and attributes
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
// could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
// but for Vue templates we can enforce a simple charset
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)
const startTagClose = /^\s*(\/?)>/
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
const doctype = /^<!DOCTYPE [^>]+>/i
const comment = /^<!--/
const conditionalComment = /^<!\[/

attribute

这与上之前我们讲解的小例子中所定义的正则的作用基本是一致的，只不过 Vue 所定义的正则更加严谨和完善，我们一起看一下这些正则的作用。首先是 attribute 常量：

// Regular Expressions for parsing tags and attributes
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/

attribute 顾名思义，这个正则的作用是用来匹配标签的属性(attributes)的，如下图所示：

我们在观察一个复杂表达式的时候，主要就是要观察它有几个分组(准确的说应该是有几个捕获的分组)，通过上图我们能够清晰的看到，这个表达式有五个捕获组，第一个捕获组用来匹配属性名，第二个捕获组用来匹配等于号，第三、第四、第五个捕获组都是用来匹配属性值的，这是因为在 html 标签中有三种写属性值的方式：

1、使用双引号把值引起来：class="some-class"
2、使用单引号把值引起来：class='some-class'
3、不适用引号：class=some-class

正因如此，需要三个正则分组分别匹配三种情况，我们可以对这个正则做一个测试，如下：

const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
console.log('class="some-class"'.match(attribute))  // 测试双引号
console.log("class='some-class'".match(attribute))  // 测试单引号
console.log('class=some-class'.match(attribute))  // 测试无引号

对于双引号的情况，我们将得到以下结果：

[
    'class="some-class"',
    'class',
    '=',
    'some-class',
    undefined,
    undefined
]

数组共有从 0 到 5 六个元素，第 0 个元素是被整个正则所匹配的结果，从第 1 至第 5 个元素分别对应五个捕获组的匹配结果，我们可以看到，第 1 个元素对应第一个捕获组，匹配到了属性名(class)；第 2 个元素对应第二个捕获组，匹配到了等号(=)；第 3 个元素对应第三个捕获组，匹配到了带双引号的属性值；而第 4 和第 5 个元素分别对应第四和第五个捕获组，由于没有匹配到所以都是 undefined。

所以通过以上结果我们很容易想到当属性值被单引号起来和不使用引号的情况，所得到的匹配结果是什么，变化主要就在匹配结果数组的第 3、4、5 个元素，匹配到哪种情况，那么对应的位置就是属性值，其他位置则是 undefined，如下：

// 对于单引号的情况
[
    'class="some-class"',
    'class',
    '=',
    undefined,
    'some-class',
    undefined
]
// 对于没有引号
[
    'class="some-class"',
    'class',
    '=',
    undefined,
    undefined,
    'some-class'
]

ncname

接下来一句代码如下：

// could use https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName
// but for Vue templates we can enforce a simple charset
const ncname = '[a-zA-Z_][\\w\\-\\.]*'

首先给大家解释几个概念并说明一些问题：

一、合法的 XML 名称是什么样的？

首先在 XML 中，标签是用户自己定义的，比如：<bug></bug>。

正因为这样，所以不同的文档中如果定义了相同的元素(标签)，就会产生冲突，为此，XML 允许用户为标签指定前缀：<k:bug></k:bug>，前缀是字母 k。

除了前缀还可以使用命名空间，即使用标签的 xmlns 属性，为前缀赋予与指定命名空间相关联的限定名称：

<k:bug xmlns:k="http://www.xxx.com/xxx"></k:bug>

综上所述，一个合法的XML标签名应该是由 前缀、冒号(:) 以及 标签名称 组成的：<前缀:标签名称>

二、什么是 ncname？

ncname 的全称是 An XML name that does not contain a colon (:) 即：不包含冒号(:)的 XML 名称。也就是说 ncname 就是不包含前缀的XML标签名称。大家可以在这里找到关于 ncname 的概念。

三、什么是 qname？

我们可以在 Vue 的源码中看到其给出了一个连接：https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName，其实 qname 就是：<前缀:标签名称>，也就是合法的XML标签。

了解了这些，我们再来看 ncname 的正则表达式，它定了 ncname 的合法组成，这个正则所匹配的内容很简单：*字母、数字或下划线开头，后面可以跟任意数量的字符、中横线和 .*。

qnameCapture

下一个正则是 qnameCapture，qnameCapture 同样是普通字符串，只不过将来会用在 new RegExp() 中：

const qnameCapture = `((?:${ncname}\\:)?${ncname})`

我们知道 qname 实际上就是合法的标签名称，它是有可选项的 前缀、冒号 以及 名称 组成，观察 qnameCapture 可知它有一个捕获分组，捕获的内容就是整个 qname 名称，即整个标签的名称。

startTagOpen

startTagOpen 是一个真正使用 new RegExp() 创建出来的正则表达式：

const startTagOpen = new RegExp(`^<${qnameCapture}`)

用来匹配开始标签的一部分，这部分包括：< 以及后面的 标签名称，这个表达式的创建用到了上面定义的 qnameCapture 字符串，所以 qnameCapture 这个字符串中所设置的捕获分组，在这里同样适用，也就是说 startTagOpen 这个正则表达式也会有一个捕获的分组，用来捕获匹配的标签名称。

startTagClose

const startTagClose = /^\s*(\/?)>/

startTagOpen 用来匹配开始标签的 < 以及标签的名字，但是并不包过开始标签的闭合部分，即：> 或者 />，由于标签可能是一元标签，所以开始标签的闭合部分有可能是 />，比如：<br />，如果不是一元标签，此时就应该是：>

观察 startTagClose 可知，这个正则拥有一个捕获分组，用来捕获开始标签结束部分的斜杠：/。

endTag

const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)

endTag 这个正则用来匹配结束标签，由于该正则同样使用了字符串 qnameCapture，所以这个正则也拥有了一个捕获组，用来捕获标签名称。

doctype

const doctype = /^<!DOCTYPE [^>]+>/i

这个正则用来匹配文档的 DOCTYPE 标签，没有捕获组。

comment

const comment = /^<!--/

这个正则用来匹配注释节点，没有捕获组。

conditionalComment

const conditionalComment = /^<!\[/

这个正则用来匹配条件注释节点，没有捕获组。

最后很重要的地点是，大家主要，这些正则表达式有一个共同的特点，即：*他们都是从一个字符串的开头位置开始匹配的，因为有 ^ 的存在*。

9Vue中的html-parser.md 8.6 KB Riwayat Mentahan