|
|
@@ -41,7 +41,7 @@ const conditionalComment = /^<!\[/
|
|
|
|
|
|
##### attribute
|
|
|
|
|
|
-这与上之前我们讲解的小例子中所定义的正则的作用基本是一致的，只不过 `Vue` 所定义的正则更加严谨和完善，我们一次看一下这些正则的作用。首先看一下 `attribute` 常量：
|
|
|
+这与上之前我们讲解的小例子中所定义的正则的作用基本是一致的，只不过 `Vue` 所定义的正则更加严谨和完善，我们一起看一下这些正则的作用。首先是 `attribute` 常量：
|
|
|
|
|
|
```js
|
|
|
// Regular Expressions for parsing tags and attributes
|
|
|
@@ -52,7 +52,7 @@ const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s
|
|
|
|
|
|
|
|
|
|
|
|
-我们在观察一个复杂表达式的时候，主要就是要观察它有几个分组(准确的说应该是有几个捕获的分组)，通过上图我们能够清晰的看到，这个表达式一个有五个捕获组，第一个捕获组用来匹配属性名，第二个捕获组用来匹配等于号，第三、第四、第五个捕获组都是用来匹配属性名的，这是因为在 `html` 标签中有三种写属性值的方式：
|
|
|
+我们在观察一个复杂表达式的时候，主要就是要观察它有几个分组(准确的说应该是有几个捕获的分组)，通过上图我们能够清晰的看到，这个表达式有五个捕获组，第一个捕获组用来匹配属性名，第二个捕获组用来匹配等于号，第三、第四、第五个捕获组都是用来匹配属性值的，这是因为在 `html` 标签中有三种写属性值的方式：
|
|
|
|
|
|
* 1、使用双引号把值引起来：`class="some-class"`
|
|
|
* 2、使用单引号把值引起来：`class='some-class'`
|
|
|
@@ -82,7 +82,7 @@ console.log('class=some-class'.match(attribute)) // 测试无引号
|
|
|
|
|
|
数组共有从 `0` 到 `5` 六个元素，第 `0` 个元素是被整个正则所匹配的结果，从第 `1` 至第 `5` 个元素分别对应五个捕获组的匹配结果，我们可以看到，第 `1` 个元素对应第一个捕获组，匹配到了属性名(`class`)；第 `2` 个元素对应第二个捕获组，匹配到了等号(`=`)；第 `3` 个元素对应第三个捕获组，匹配到了带双引号的属性值；而第 `4` 和第 `5` 个元素分别对应第四和第五个捕获组，由于没有匹配到所以都是 `undefined`。
|
|
|
|
|
|
-所以通过以上结果我们很容易想到当属性值被单引号起来和不使用引号的情况，所得到的匹配结果是什么，变化主要就在数组的第 `3`、`4`、`5` 个元素，匹配到哪种情况，那么对应的位置就是属性值，其他位置则是 `undefined`，如下：
|
|
|
+所以通过以上结果我们很容易想到当属性值被单引号起来和不使用引号的情况，所得到的匹配结果是什么，变化主要就在匹配结果数组的第 `3`、`4`、`5` 个元素，匹配到哪种情况，那么对应的位置就是属性值，其他位置则是 `undefined`，如下：
|
|
|
|
|
|
```js
|
|
|
// 对于单引号的情况
|
|
|
@@ -115,7 +115,7 @@ console.log('class=some-class'.match(attribute)) // 测试无引号
|
|
|
const ncname = '[a-zA-Z_][\\w\\-\\.]*'
|
|
|
```
|
|
|
|
|
|
-首先给大家解释几个概念或说明一些问题：
|
|
|
+首先给大家解释几个概念并说明一些问题：
|
|
|
|
|
|
* 一、合法的 XML 名称是什么样的？
|
|
|
|
|
|
@@ -129,7 +129,7 @@ const ncname = '[a-zA-Z_][\\w\\-\\.]*'
|
|
|
<k:bug xmlns:k="http://www.xxx.com/xxx"></k:bug>
|
|
|
```
|
|
|
|
|
|
-综上所述，一个合法的XML标签名应该是由 `前缀`、`冒号(:)` 以及 `标签名称` 组成的：`<前缀:名称>`
|
|
|
+综上所述，一个合法的XML标签名应该是由 `前缀`、`冒号(:)` 以及 `标签名称` 组成的：`<前缀:标签名称>`
|
|
|
|
|
|
* 二、什么是 `ncname`？
|
|
|
|
|
|
@@ -137,7 +137,7 @@ const ncname = '[a-zA-Z_][\\w\\-\\.]*'
|
|
|
|
|
|
* 三、什么是 `qname`？
|
|
|
|
|
|
-我们可以在 `Vue` 的源码中看到其给出了一个连接：[https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName](https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName)，其实 `qname` 就是：`<前缀:名称>`，也就是合法的XML标签。
|
|
|
+我们可以在 `Vue` 的源码中看到其给出了一个连接：[https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName](https://www.w3.org/TR/1999/REC-xml-names-19990114/#NT-QName)，其实 `qname` 就是：`<前缀:标签名称>`，也就是合法的XML标签。
|
|
|
|
|
|
了解了这些，我们再来看 `ncname` 的正则表达式，它定了 `ncname` 的合法组成，这个正则所匹配的内容很简单：*字母、数字或下划线开头，后面可以跟任意数量的字符、中横线和 `.`*。
|
|
|
|
HcySunYang