Vue源码解析之Template转化为AST

huangjinnan 发布于2019-08-21 17:00 / 1558人阅读

摘要：下面用具体代码进行分析。匹配不到那么就是开始标签，调用函数解析。如这里的转化为加上是为了的下一步转为函数，本文中暂时不会用到。再把转化后的内容进。

什么是AST

在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。

Virtual Dom

Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。
Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数最终返回一个VNode(VNode就是Vue的虚拟DOM节点)
本文通过对源码中AST转化部分进行简单提取，因为源码中转化过程还需要进行各种兼容判断，非常复杂，所以笔者对主要功能代码进行提取，用了300-400行代码完成对template转化为AST这个功能。下面用具体代码进行分析。

 function parse(template) {
        var currentParent;    //当前父节点
        var root;            //最终返回出去的AST树根节点
        var stack = [];
        parseHTML(template, {
            start: function start(tag, attrs, unary) {
               ......
            },
            end: function end() {
              ......
            },
            chars: function chars(text) {
               ......
            }
        })
        return root
    }

第一步就是调用parse这个方法，把template传进来，这里假设template为

{{message}}

然后声明3个变量
currentParent -> 存放当前父元素，root -> 最终返回出去的AST树根节点，stack -> 一个栈用来辅助树的建立
接着调用parseHTML函数进行转化，传入template和options（包含3个方法 start,end,chars 等下用到这3个函数再进行解释）接下来先看parseHTML这个方法

 function parseHTML(html, options) {
        var stack = [];    //这里和上面的parse函数一样用到stack这个数组 不过这里的stack只是为了简单存放标签名 为了和结束标签进行匹配的作用
        var isUnaryTag$$1 = isUnaryTag;   //判断是否为自闭合标签
        var index = 0;
        var last;
        while (html) {
            //　　第一次进入while循环时，由于字符串以<开头，所以进入startTag条件，并进行AST转换，最后将对象弹入stack数组中
            last = html;
            var textEnd = html.indexOf("<");
            if (textEnd === 0) {     // 此时字符串是不是以<开头
                // End tag:
                var endTagMatch = html.match(endTag);
                if (endTagMatch) {
                    var curIndex = index;
                    advance(endTagMatch[0].length);
                    parseEndTag(endTagMatch[1], curIndex, index);
                    continue
                }

                // Start tag:    // 匹配起始标签
                var startTagMatch = parseStartTag();    //处理后得到match
                if (startTagMatch) {
                    handleStartTag(startTagMatch);
                    continue
                }
            }

            // 初始化为undefined 这样安全且字符数少一点
            var text = (void 0), rest = (void 0), next = (void 0);
            if (textEnd >= 0) {      // 截取<字符索引 =>

这里截取到闭合的< rest = html.slice(textEnd); //截取闭合标签 // 处理文本中的<字符 // 获取中间的字符串 => {{message}} text = html.substring(0, textEnd); //截取到闭合标签前面部分 advance(textEnd); //切除闭合标签前面部分 } // 当字符串没有<时 if (textEnd < 0) { text = html; html = ""; } // // 处理文本 if (options.chars && text) { options.chars(text); } } }

函数进入while循环对html进行获取<标签索引 var textEnd = html.indexOf("<");如果textEnd === 0 说明当前是标签或者再用正则匹配是否当前是结束标签。var endTagMatch = html.match(endTag); 匹配不到那么就是开始标签，调用parseStartTag()函数解析。

function parseStartTag() {      //返回匹配对象
    var start = html.match(startTagOpen);         // 正则匹配
    if (start) {
        var match = {
            tagName: start[1],       // 标签名(div)
            attrs: [],               // 属性
            start: index             // 游标索引(初始为0)
        };
        advance(start[0].length);
        var end, attr;
        while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {  
            advance(attr[0].length);  
            match.attrs.push(attr);
        }
        if (end) {
            advance(end[0].length);      // 标记结束位置
            match.end = index;      //这里的index 是在 parseHTML就定义 在advance里面相加
            return match         // 返回匹配对象 起始位置 结束位置 tagName attrs
        }
    }
}

该函数主要是为了构建一个match对象，对象里面包含tagName(标签名)，attrs(标签的属性)，start(<左开始标签在template中的位置)，end(>右开始标签在template中的位置) 如template =

{{message}}

程序第一次进入该函数匹配的是div标签所以tagName就是div
start：0 end:14 如图：

接着把match返回出去作为调用handleStartTag的参数

var startTagMatch = parseStartTag();    //处理后得到match
if (startTagMatch) {
    handleStartTag(startTagMatch);
    continue
}

接下来看handleStartTag这个函数：

 function handleStartTag(match) {
    var tagName = match.tagName;
    var unary = isUnaryTag$$1(tagName)  //判断是否为闭合标签 
    var l = match.attrs.length;
    var attrs = new Array(l);
    for (var i = 0; i < l; i++) {
        var args = match.attrs[i];
        var value = args[3] || args[4] || args[5] || "";
        attrs[i] = {
            name: args[1],
            value: value
        };
    }
    if (!unary) {
        stack.push({tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs});
        lastTag = tagName;
    }
    if (options.start) {
        options.start(tagName, attrs, unary, match.start, match.end);
    }
    }

函数中分为3部分第一部分是for循环是对attrs进行转化，我们从上一步的parseStartTag()得到的match对象中的attrs属性如图

当时attrs是上面图这样子滴我们通过这个循环把它转化为只带name 和 value这2个属性的对象如图:

接着判断如果不是自闭合标签，把标签名和属性推入栈中（注意这里的stack这个变量在parseHTML中定义，作用是为了存放标签名为了和结束标签进行匹配的作用。）接着调用最后一步 options.start 这里的options就是我们在parse函数中调用parseHTML是传进来第二个参数的那个对象(包含start end chars 3个方法函数) 这里开始看options.start这个函数的作用：

start: function start(tag, attrs, unary) {
    var element = {
        type: 1,
        tag: tag,
        attrsList: attrs,
        attrsMap: makeAttrsMap(attrs),
        parent: currentParent,
        children: []
    };
    processAttrs(element);
    if (!root) {
        root = element;
    } 
    if(currentParent){
        currentParent.children.push(element);
        element.parent = currentParent;
    }
    if (!unary) {
        currentParent = element;
        stack.push(element);
    }
}

这个函数中生成element对象再连接元素的parent 和 children节点最终push到栈中
此时栈中第一个元素生成如图：

完成了while循环的第一次执行，进入第二次循环执行，这个时候html变成{{message}}

接着截取到处理过程和第一次一致经过这次循环stack中元素如图：

接着继续执行第三个循环这个时候是处理文本节点了 {{message}}

// 初始化为undefined 这样安全且字符数少一点
var text = (void 0), rest = (void 0), next = (void 0);
if (textEnd >= 0) {      // 截取<字符索引 =>

这里截取到闭合的< rest = html.slice(textEnd); //截取闭合标签 // 处理文本中的<字符 // 获取中间的字符串 => {{message}} text = html.substring(0, textEnd); //截取到闭合标签前面部分 advance(textEnd); //切除闭合标签前面部分 } // 当字符串没有<时 if (textEnd < 0) { text = html; html = ""; } // 另外一个函数 if (options.chars && text) { options.chars(text); }

这里的作用就是把文本提取出来调用options.chars这个函数接下来看options.chars

chars: function chars(text) {
    if (!currentParent) {   //如果没有父元素 只是文本
        return
    }

    var children = currentParent.children;  //取出children
    // text => {{message}}
    if (text) {
        var expression;
        if (text !== " " && (expression = parseText(text))) {
            // 将解析后的text存进children数组
            children.push({
                type: 2,
                expression: expression,
                text: text
            });
        } else if (text !== " " || !children.length || children[children.length - 1].text !== " ") {
            children.push({
                type: 3,
                text: text
            });
        }
    }
}
})

这里的主要功能是判断文本是{{xxx}}还是简单的文本xxx,如果是简单的文本 push进父元素的children里面，type设置为3，如果是字符模板{{xxx}}，调用parseText转化。如这里的{{message}}转化为 _s(message)(加上_s是为了AST的下一步转为render函数，本文中暂时不会用到。) 再把转化后的内容push进children。

又走完一个循环了，这个时候html =

剩下2个结束标签进行匹配了

  var endTagMatch = html.match(endTag);
    if (endTagMatch) {
        var curIndex = index;
        advance(endTagMatch[0].length);
        parseEndTag(endTagMatch[1], curIndex, index);
        continue
    }

接下来看parseEndTag这个函数传进来了标签名开始索引和结束索引

  function parseEndTag(tagName, start, end) {
    var pos, lowerCasedTagName;
    if (tagName) {
        lowerCasedTagName = tagName.toLowerCase();
    }
    // Find the closest opened tag of the same type
    if (tagName) { // 获取最近的匹配标签
        for (pos = stack.length - 1; pos >= 0; pos--) {
            // 提示没有匹配的标签
            if (stack[pos].lowerCasedTag === lowerCasedTagName) {
                break
            }
        }
    } else {
        // If no tag name is provided, clean shop
        pos = 0;
    }
    
    if (pos >= 0) {
        // Close all the open elements, up the stack
        for (var i = stack.length - 1; i >= pos; i--) {
            if (options.end) {
                options.end(stack[i].tag, start, end);
            }
        }
    
        // Remove the open elements from the stack
        stack.length = pos;
        lastTag = pos && stack[pos - 1].tag;
}

这里首先找到栈中对应的开始标签的索引pos，再从该索引开始到栈顶的所以元素调用options.end这个函数

 end: function end() {
    // pop stack
    stack.length -= 1;
    currentParent = stack[stack.length - 1];
},

把栈顶元素出栈，因为这个元素已经匹配到结束标签了，再把当前父元素更改。终于走完了，把html的内容循环完，最终return root 这个root就是我们所要得到的AST

这只是Vue的冰山一角，文中有什么不对的地方请大家帮忙指正，本人最近也一直在学习Vue的源码，希望能够拿出来与大家一起分享经验，接下来会继续更新后续的源码，如果觉得有帮忙请给个Star哈
github地址为:https://github.com/zwStar/vue... 欢迎各位star或issues

云服务器 GPU云服务器转化为对象声明转化为引用图片转化为文字 js文本转化为语音

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89019.html

vue分析之template模板解析AST

摘要：注意看注释很粗很简单，我就是一程序员姓名，年龄，请联系我吧是否保留注释定义分隔符，默认为对于转成，则需要先获取，对于这部分内容，做一个简单的分析，具体的请自行查看源码。其中的负责修改以及截取剩余模板字符串。通过查看vue源码，可以知道Vue源码中使用了虚拟DOM（Virtual Dom），虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数最终返回...

2bdenny 2019-08-22 18:24 评论0 收藏0
【Vue原理】Compile - 源码版之从新建实例到 compile结束的主要流程

摘要：页面这个实例，按理就需要解析两次，但是有缓存之后就不会理清思路也就是说，其实内核就是不过是经过了两波包装的第一波包装在中的内部函数中内部函数的作用是合并公共和自定义，但是相关代码已经省略，另一个就是执行第二波包装在中，目的是进行缓存写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 ...

CODING 2019-08-26 10:40 评论0 收藏0
Vue 2.0源码学习

摘要：今年的月日，的版本正式发布了，其中核心代码都进行了重写，于是就专门花时间，对的源码进行了学习。本篇文章就是源码学习的总结。实现了并且将静态子树进行了提取，减少界面重绘时的对比。的最新源码可以去获得。 Vue2.0介绍从去年9月份了解到Vue后，就被他简洁的API所吸引。1.0版本正式发布后，就在业务中开始使用，将原先jQuery的功能逐步的进行迁移。今年的10月1日，Vue的2...

Joyven 2019-08-20 12:18 评论0 收藏0
【Vue原理】Compile - 源码版之 Parse 主要流程

写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本【2.5.17】如果你觉得排版难看，请点击下面链接或者拉到下面关注公众号也可以吧【Vue原理】Compile - 源码版之 Parse 主要流程本文难度较繁琐，需要耐心观看，如果你对 compile 源码暂时...

Forest10 2019-08-26 10:41 评论0 收藏0
聊聊Vue.js的template编译

摘要：具体可以查看抽象语法树。而则是带缓存的编译器，同时以及函数会被转换成对象。会用正则等方式解析模板中的指令等数据，形成语法树。是将语法树转化成字符串的过程，得到结果是的字符串以及字符串。里面的节点与父节点的结构类似，层层往下形成一棵语法树。写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文...

gnehc 2019-08-21 16:56 评论0 收藏0