【Vue原理】Compile - 源码版 之 Parse 标签解析

写文章不容易，点个赞呗兄弟


专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧
研究基于 Vue版本 【2.5.17】

如果你觉得排版难看，请点击 下面链接 或者 拉到 下面关注公众号也可以吧

【Vue原理】Compile - 源码版 之 标签解析

咳咳，上一篇文章，我们已经大致把 parse 的流程给记录了一遍，如果没看过，比较建议，先把这个流程给看了
Compile - 源码版 之 Parse 主要流程

但是忽略了其中的处理细节，比如标签怎么解析的，属性怎么解析的，而且这两个内容也是非常多的，所以需要单独拎出来详细记录，不然混在一起，又臭又长

白话版在这~ Compile - 白话版

今天的内容是，记录 标签解析的 源码

首先，开篇之前呢，我们来了解一下文章会出现过的正则

---

相关正则

var ncname = '[a-zA-Z_][\\w\\-\\.]*';

var qnameCapture = "((?:" + ncname + "\\:)?" + ncname + ")";

var startTagOpen = new RegExp(("^<" + qnameCapture));

var startTagClose = /^\s*(\/?)>/;

var endTag = new RegExp(("^<\\/" + qnameCapture + "[^>]*>"));

var attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/;

主要是四个

startTagOpen

匹配 头标签的 前半部分。当字符串开头是 头标签时，可以匹配

startTagClose

匹配 头标签的 右尖括号。当字符串开头是 > 时，可以匹配

endTag

匹配 尾标签。当字符串开头是 尾标签时 可以匹配

attribute

匹配标签上的属性。当字符串开头是属性则可以匹配

好的，看完上面四个正则， 心里有个 * 数之后，相信下面的内容你会更加清晰些

下面的内容分为

1、循环遍历 template

2、处理 头标签

3、处理 尾标签

那么我们按一个个来说

---

循环遍历template

通过上一篇内容，已经记录过 是怎么循环遍历 template 的了，就是通过 parseHTML 这个方法

这个方法，因为内容需要，也记录一遍

首先，什么是循环遍历template?

template 是一个字符串，所以每匹配完一个信息（比如头标签等），就会把template 截断到匹配的结束位置

比如 template 是

"
1111
"

当我们匹配完了 头标签，那么 template 就会被截断成

"1111

"

然后就这样一直循环匹配新的 template，直到 template 被截断成 空字符串，那么匹配完毕，其中跟截断有关的一个重要函数就是 advance

这个函数在下面的源码中用得非常多，需要牢记

其作用就是

1、截断template

2、保存当前截断的位置。比如你匹配了template到 字符串长度为5 的位置，那么 index 就是 4（从0开始）

function advance(n) {
    index += n;
    html = html.substring(n);
}

记住这个函数哦，我传入一个数字 n，就是要把 template 从 n 截取到结尾

然后下面就看看简化的 parseHTML 源码（如果嫌长，先跳到分析）

function parseHTML(html, options) {    

    

    // 保存所有标签的对象信息，tagName，attr，这样，在解析尾部标签的时候得到所属的层级关系以及父标签

    var stack = [];    

    var index = 0;    

    var last;    

    

    while (html) {



        last = html;        

        var textEnd = html.indexOf('<');        



        // 如果开头是 标签的 <

        if (textEnd === 0) {      

      

            /**
             * 如果开头的 < 属性尾标签
             * 比如 html = '

' * 匹配出 endTagMatch =["

", "div"] */ * 如果开头的 < 属性尾标签 * 比如 html = '