joomla 2.5:你的网站建设_使用与管理 pdf,100个成功营销案例,抖音代运营合同陷阱,济南网络电视台vue2源码
在 vue2 源码的 src\compiler\parser\html-parser.js 文件中
里面有大量的正则表达式#xff0c;如下图 可以看到非常的长#xff0c;不是我说#xff0c;就前几行#xff0c;如果没有相关的 正则表达式 的工具#xff0c;我可能就被劝退了#x1f62d;
这里…vue2源码
在 vue2 源码的 src\compiler\parser\html-parser.js 文件中
里面有大量的正则表达式如下图 可以看到非常的长不是我说就前几行如果没有相关的 正则表达式 的工具我可能就被劝退了
这里先推荐一个 可视化正则表达式 工具非常好用
回归正题那上面这么多 正则表达式 代表的什么含义呢
它们主要是用来匹配我们的 html 模板* 之后会将匹配到的内容转化成 AST 语法树可以看到这些是很重要的
我们接下来分析理解一下里面的相关内容。
1. startTagOpen
它是 html 开始标签的 左边 部分
而生成这个 正则表达式 的代码有四行
const unicodeRegExp /a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/
const ncname [a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*
const qnameCapture ((?:${ncname}\\:)?${ncname})
const startTagOpen new RegExp(^${qnameCapture}) 它的作用或者说它能够匹配到的内容
标签开始符号 当然后面会跟着相关的标签内容下面会分析有哪些标签内容* 但是注意 没有 标签结束符 ### 1.1 ncname
在知道它匹配什么内容了之后我们看一下 ncname
可以看到它是一个 字符串里面有 unicodeRegExp.source
这就引出我们第一个知识点正则的 RegExp.source
可以看下它的 MDN 介绍我们知道它这个属性的作用是
获取正则表达式里面的内容* 即获取到 两侧的斜杠 /.../ 之间的内容即我们得到 ncname 这个字符串的值为
const ncname [a-zA-Z_][\\-\\.0-9_a-zA-Za-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u203F-\\u2040\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD]* 转化为正则后
const newNcanme new RegExp(ncname)/[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*/ 我们将这个正则表达式放到 可视化工具 中得到下图 可以看到它能够匹配开头为 a-z 、 A-Z 、_ 中的其中一个后面则是零次或多次
1.2 qnameCapture
知道 ncname 匹配的内容是什么之后我们接下来我们看下 qnameCapture
const qnameCapture ((?:${ncname}\\:)?${ncname})((?:[a-zA-Z_][\\-\\.0-9_a-zA-Za-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u203F-\\u2040\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD]*\\:)?[a-zA-Z_][\\-\\.0-9_a-zA-Za-zA-Z\\u00B7\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u203F-\\u2040\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD]*) 转化为正则并将其放入 可视化工具 中
const newQnameCapture new RegExp(qnameCapture)/((?:[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*\:)?[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*)/ 从 代码 和 图一起分析可以知道
将它们整体作为了一个 组* 又将前面第一部分作为 非捕获分组虽然需要匹配内容但是我们并不需要它的一个结果 (?:表达式)* 在表达式后面可以看到有一个 : 字符说明如果前面这个匹配 那么后面必须跟上一个 : 字符才算成功* 在前面的分组后面紧跟 重复 字段 ?说明它能够匹配 0次 或 1 次* 最后面则就是 ncname上面已经分析过了。### 1.3 startTagOpen
最后就是我们的 startTagOpen
这个其实很好理解就是在前面加上了一个元字符 ^ 和
代表的意思就是必须是 开头
但是注意哦并没有说结尾* 结尾则是后面要讲的 startTagClose 来匹配的这里我们依然进行一波 处理看下结果
const startTagOpen new RegExp(^${qnameCapture})/^((?:[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*\:)?[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*)/ 1.4 总结
我们知道了 startTagOpen 的一个作用
就是用来以匹配 开头后面跟上标签标签开头必须是 a-z、A-Z、_ 中的一个
例如div、xxx:yyy
值得注意它是没有结束的右尖括号 的
2. startTagClose
它是 html 开始标签的 右边 部分
先看下正则表达式
const startTagClose /^\s*(\/?)/ 这个主要是匹配 标签结束符 当然还包括一些其它内容
前面可能有空格* 可能有 / 字符例如 div 或者 单标签 img / 的 右边部分 和 /
下面是它的 正则表达式 图可以看到很简单 3. endTag
它是 html 整个 结束标签
例如 /div 、 /xxx:yyy
这里看下它的 正则表达式 以及 图
const endTag new RegExp(^\\/${qnameCapture}[^]*)/^\/((?:[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*\:)?[a-zA-Z_][\-\.0-9_a-zA-Za-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD]*)[^]*/ 可以看到 结束标签 的 开头 必须是 /结尾 必须是
中间的内容就跟上面分析的一样
但是结尾前边有一个 非 的区间就有点疑问了
虽然这个含义很好理解但是为什么加这个呢* 仅仅只是为了说明前面只要不是 都行但是前面已经有 ncanme 了。* 所以这个字符的真正含义有没有大佬出来解答下4. attribute 看这个单词的含义我们都知道是 属性 的意思
因为后面还有 dynamicArgAttribute
所以我们叫 attribute为 普通的 html 属性
那我们来分析下这个 正则表达式 的含义吧
const attribute /^\s*([^\s\/])(?:\s*()\s*(?:([^]*)|([^]*)|([^\s])))?/ 害光看这么长都有点脑瓜子嗡嗡的
顺便放到工具中得到下图 4.1 正则分析 - 1
可以看到一上去前面可以匹配一些空格 \s*
之后遇到 第一个分组 里面是一个 区间因为开头是 ^说明是一个取反操作* 里面不能是 (空格、、、、、/、* 并且后面有一个 重复 字符 说明必须匹配一次以上往后看是 第二个分组 不过这个分组是一个 非捕获分组 (?:表达式)* 而且这个它后面紧跟一个 重复 字符 说明匹配 0 次或 1 次到这里我们先暂停下
通过上面的分析我们可以大概知道它能够匹配的属性是什么
它能够匹配 单个属性 例如
button disabled 这里面的 disabled 属性
4.2 正则分析 - 2
我们接着分析 非捕获分组 这一大段里面的内容 (红框部分)
/(?:\s*()\s*(?:([^]*)|([^]*)|([^\s])))/ 我们可以看到有个小的分组里面是 字符左右两边都是 \s* 说明 左右两边 可以有 空格 出现但是平时我们都是紧贴着的 是因为 Eslint 给我们提示了而 vue 本身是支持 左右两边 有空格的。 我们继续分析
可以看到又是一个 非捕获分组里面的内容通过 或运算符 | 连接
([^]*) 说明了 可以是 双引号* ([^]*) 说明了 可以使 单引号* 最后则表示匹配非 空格、、、、、、****通过第二段分析我们直接说一下它能够匹配到的内容是什么
例如
class aaa 、 classaaa* style color:red;、 stylecolor:red;* 第三个其实没找到很好的例子希望有大佬来解惑### 4.3 总结
总结下上面这两点其实它这个匹配的内容是
无 号* 例如 button disabled 中的 disabled 这类有 号* 例如 button style class 中的 或者 这类* 当然 号 的左右两边都可以有空格5.dynamicArgAttribute 上面我们说了 普通的 html 属性
下面说一下 vue 的 动态属性
用过 vue 都知道 动态属性就是在普通属性前面加一些 符号例如
v-xxx* :xxx* xxx* #xxx 这个我也是看完源码后才知道还有这么个符号表示根本没用过…* 而它呢是 v-slot 的简写
当然我们这里还是要分析下它的 正则表达式
/^\s*((?:v-[\w-]:||:|#)\[[^]\][^\s\/]*)(?:\s*()\s*(?:([^]*)|([^]*)|([^\s])))?/ 并且得到如下图 这里我将它与 普通 html 属性 的区别用红色的框 框起来了
5.1 正则分析 - 1
(?:v-[\w-]:||:|#) 是一个 非捕获分组而它匹配到的内容为
v- 后面紧跟上 区间区间 里面包含 \w 和 -* \w 是能够匹配 字母、数字、下划线( _ ) 、中文* 而 区间 后面有个重复 说明至少匹配区间里面的内容一次* 最后跟上一个 : 字符* * :* #### 5.2 正则分析 - 2
\[[^]\] 这个很简单了
首先是 转义字符 \ 帮我们将 [ 进行了转义* 之后是一个 区间但是第一个字符是 ^ 说明进行了 取反 的操作* 也就是 除了 外的 任意字符* 后面有个 重复字符 至少匹配一次* 最后是 转义后的 ]### 5.3 总结
通过上面的分析我们能够得到这个 正则表达式 可以匹配的内容是
下面是大概的例子
div v-bind:[disabled]true 、简写 :[disabled]true* div v-on:[click]xxxFunc 、 简写 [click]xxxFunc* div v-slot:[xxx]yyy、 简写 #[xxx]xxxFunc可以看到匹配的内容与我们平时写法有区别的。
6. doctype
其实这个大家熟悉也陌生
这个是我们 html 页面中最上面的声明部分
它的作用是告知 web 浏览器页面使用 哪种 html 版本
目前我们经常使用的是
!DOCTYPE html
其它的情况其实也没怎么见过
接下来看下正则吧
const doctype /^!DOCTYPE [^]/i 首先是 元字符 的 ^ 开头后面必须是 !DOCTYPE* 后面 [^] 因为 区间 的开头是 ^说明进行了取反操作* 也就是能够匹配处理 以外其它任意字符* 最后是 重复 的 至少匹配一次* 然后是 结尾* 当然我们看到后面还有个 修饰符 i不区分大小写它这个意思就是能够 匹配 我们 html 页面中 最开头的 !DOCTYPE xxxxxx yyyy 这个声明* 或者小写的 !doctype xxxxxx yyyy 都可以7. comment const comment /^!\--/ 这个是匹配我们的 html 中注释的 开头也就是 !--
元字符 的 ^ 开头后面紧跟 !--
这个较容易理解我们直接下一个
8. conditionalComment
首先这个名字是条件注释 的意思
其次这个使用的场景目前搜到的是为了判断 IE 浏览器版本时用的
平时很少见
看下 正则表达式
const conditionalComment /^!\[/ 与上面的 comment 很相似就不再做分析
说一下它匹配到的内容 