【Vue原理】Compile - 源码版 之 Parse 主要流程

时间  2019-11-07
标签 Vue原理 compile 源码 parse 主要 流程 繁體版
原文   原文链接

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

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

若是你以为排版难看，请点击 下面连接 或者 拉到 下面关注公众号也能够吧express

【Vue原理】Compile - 源码版 之 Parse 主要流程 数组

本文难度较繁琐，须要耐心观看，若是你对 compile 源码暂时不感兴趣能够先移步白话版 Compile - 白话版，缓存

parse 是 渲染三巨头的老大，其做用是把 template 字符串模板，转换成 astbash

其涉及源码也是多得一批，达到了 一千多行，想一想若是我把所有源码放到文章里面来简直不能看，因此我打算只保留主要部分，就是正常流程能够走通，去掉那些特殊处理的地方函数

大部分源码都是特殊处理，好比 script ，style，input ，pre 等标签，此次所有都去掉，只留下通用元素的处理流程，留下一个骨架学习

由于 parse 的内容很是的多，除了精简源码以外，我还经过不一样内容划分文章去记录优化

今天，要记录的就是 parse 解析 template 成 ast 的大体流程，而怎么解析标签名，怎么解析标签属性会暂时忽略，而独立成文。当有解析标签名和解析属性的地方会直接出结果。好比当我说在 模板 "<div></div>" 匹配出头标签时，直接就获得 div ，而不会去考究是如何匹配出来的ui

好的，到底 template 是怎么变成 ast 的呢？跟着我去探索把~spa

AST

先来讲说 ast 吧，这种复杂的概念，反正是须要查的。因此本文根本不须要解释太多

直接说个人理解吧

抽象语法树，以树状形式表现出语法结构

直接使用例子去直观感觉就行了

<div>111</div>
复制代码

用 ast 去描述这个模板就是

{ 
    tag:'div',    

    type :1 , 

    children:[ { 
        type:3, 
        text:'11' 
    } ] 
}
复制代码

简单得一批把，复杂的这里也不提了，反正跟 parse 没多大关系我以为

另外记一下，节点的 type 表示的意思

type：1，节点

type：2，表达式，好比 {{isShow}}

type：3，纯文本

如今就开始 parse 的内容了，那么就看 parse 的源码

Parse

parse 是渲染三巨头的老大，同时它也是一个函数，源码以下

function parse(template) {    



    var stack = []; // 缓存模板中解析的每一个节点的 ast

    var root;   // 根节点，是 ast
    var currentParent; // 当前解析的标签的父节点

    /**
    * parseHTML 处理 template 匹配标签，再传入 start，end，chars 等方法
    **/
    parseHTML(template, {        

        start: (..被抽出，在后面)

         end: (..被抽出，在后面), // 为 起始标签 开启闭合节点
         chars: (..被抽出，在后面) // 文字节点
    });    



    return root

}
复制代码

parse 接收 template 字符串，使用 parseHTML 这个函数在 template 中匹配标签

并传入 start，end，chars 三个函数 供 parseHTML 处理标签等内容

start，end，chars 方法都已经被我抽出来，放在后面逐个说明

下面来看下其中声明的三个变量

1 stack

是一个数组存放模板中按顺序 从头至尾 每一个标签的 ast

注：不会存放单标签的 ast ，好比 input，img 这些

好比 stack 是这样的

stack=[{ 
    tag:'div',    

    type :1 , 

    children:[ { 
        type:3, 
        text:'11' 
    } ] 
}]
复制代码

主要做用是帮助理清节点父子关系

2 root

每一个模板都必须有一个根节点。写过 Vue 项目的都知道了，因此通常解析到第一个标签的时候，会直接设置这个标签为 根节点

而且最后返回的也是 root

不能够存在两个根节点（有 v-if 的不讨论）

3 currentParent

在解析标签的时候，必需要知道这个标签的 父节点时谁

这样才知道 这个标签是谁的子节点，才能把这个节点添加给相应的 节点的 children

注：根节点 没有 父节点，因此就是 undefined

parse 源码已经被我精简得很简单了，主要内容其实就在 其中涉及的四个方法中

parseHTML，start，end，chars

parseHTML 是处理 template 的主力，其余三个函数是功能类型的，负责处理相应的内容。 例如，start 是处理头标签的，end 是处理尾标签的，chars 是处理文本的

先来看看 parseHTML

处理 template

parseHTML 做为处理 template，匹配标签的函数，是十分庞大的，其中兼顾了很是多状况的处理

而本次在不影响流程的状况下，我去掉了下面这些处理，优化阅读

一、没有结束标签的处理

二、文字中包含 < 的处理

三、注释的处理

四、忽略首尾空白字符，默认起始和结尾都是标签

我的认为主要内容为三个

一、循环 template 匹配标签

二、把匹配到的内容，传给相应的方法处理

三、截断 template

来看源码，已经简化得不行了，可是仍是要花点心思看看

function parseHTML(html, options) {    



    while (html) {       



         // 寻找 < 的起始位置

        var textEnd = html.indexOf('<'),
            text ,rest ,next;        



        // 模板起始位置是标签开头 <

        if (textEnd === 0) {   

               

            /**
             * 若是是尾标签的 <
             * 好比 html = '</div>' ， 匹配出 endTagMatch =["</div>", "div"]
             */
            var endTagMatch = html.match(endTag);            



            if (endTagMatch) {      

          

                // endTagMatch[0]="</a>"

                html = html.substring(endTagMatch[0].length); 

              

                // 处理尾标签，方法后面有记录
                options.end();                



                continue

            }   

                

            /**
             * 若是是起始标签的 <
             * parseStartTag 做用是，匹配标签存在的属性，截断 template
             * html = '<div></div>', 

             * parseStartTag 处理以后，startTagMatch = {tagName: "div", attrs: []}

             */
            var startTagMatch = parseStartTag();   

       

            // 匹配到 起始标签以后
            if (startTagMatch) {  

             

                // 处理起始标签，后面有介绍
                options.start(起始标签的信息);                



                continue

            }
        }        



        // 模板起始位置不是 <，而是文字

        if (textEnd >= 0) {
            text = html.substring(0, textEnd);
            html = html.substring(n);
        }       



        // 处理文字，后面有介绍
        if (options.chars && text) {
            options.chars(text);
        }
    }
}
复制代码

思路以下

1匹配 < 这个符号

由于他是标签的开头（已经排除了文字中含有 < 的处理，不作讨论）

2若是 template 开头是 <

那么多是 尾标签，多是 头标签，那么就须要判断究竟是哪一个

一、先匹配尾标签，若是匹配到，那么就是尾标签，使用 end 方法处理。

二、若是不是，使用 parseStartTag 函数匹配获得首标签，并把 首标签信息传给 start 处理

parseStartTag 就是使用正则在template 中匹配出 首标签信息，其中包括标签名，属性等

好比 template 是

html = '<div name="22">111</div>;'
复制代码

parseStartTag 处理匹配以后获得

{    

    tagName: "div", 

    attrs: [{name:"22"}]
}
复制代码

3 若是 template 开头不是 <

那么证实 开头 到 < 的位置这一段，是字符串，那么就是文本了

传给 chars 方法处理

每次处理一次，就会截断到匹配的位置，而后 template 愈来愈短，直接为空，退出 while，因而处理完毕

对于截断呢，使用 substring，可能忘了怎么做用的，写个小例子

传入数字，表示这个位置前面的字符串都不要

image

而后，就到了咱们其余三个方法的闪亮登场了

处理头标签

每当 parseHTML 匹配到一个 首标签，都会把该标签的信息传给 start 方法，让他来处理

function start(tag, attrs, unary) {    



    // 建立 AST 节点

    var element = createASTElement(tag, attrs, currentParent);      



    /**
     * ...省略了一段处理 vFor，vIf，解析 @ 等属性指令的代码
     **/

    // 设置根节点，一个模板只有一个根节点
    if (!root) root = element;    



    // 处理父子关系

    if (currentParent) {
        currentParent.children.push(element);
        element.parent = currentParent;
    }    



    // 不是单标签（input，img 那些），就须要保存 stack

    if (!unary) {
        currentParent = element;
        stack.push(element);
    }
}
复制代码

精简得一目了然（面目全非），看得极度温馨

看看 start 方法都作了哪些恶呢

一、建立 ast

二、解析 attrs，并存放到 ast （已省略属性解析）

三、设置根节点，父节点，把节点添加进父节点的 children

四、ast 保存进 stack

好像不用解释太多，确定都看得懂啊，除了一个 建立 ast 的函数

这就来源码

function createASTElement(tag, attrs, parent) {    



    return {        

        type: 1,        

        tag: tag,        

        attrsList: attrs,        

        // 把 attrs 数组 转成 对象

        attrsMap: makeAttrsMap(attrs),        

        parent: parent,        

        children: []

    }
}
复制代码

建立一个 ast 结构，保存数据

直接返回一个对象，很是明了，包含的各类属性，应该也能看懂

其中有一个 makeAttrsMap 函数，举个栗子

模板上的属性，通过 parseHTML 解析成一个数组，以下

[{    

    name:"hoho" ,value:"333"

},{    

    name:"href" ,value:"444"

}]
复制代码

makeAttrMap 转成对象成这样

{ hoho:"333",   href:"444"}
复制代码

而后就保存在 ast 中

处理尾标签

每当 parseHTML 匹配到 尾标签 ，好比 "" 的时候，就会调用传入的 end 方法

来看看吧

function end() {    

    // 标签解析结束，移除该标签

    stack.length -= 1;
    currentParent = stack[stack.length - 1];
}
复制代码

乍一看，很简单啊！这么少（都是精简...）

做用有两个

1从 stack 数组中移除这个节点

stack 保存的是匹配到的头标签，若是标签已经匹配结束了，那么就须要移除

stack 就是为了明确各节点间父子关系而存在的

保证 stack 中最后一个节点，永远是下次匹配的节点的父节点

举个栗子，存在下面模板

公众号

stack 匹配两个 头标签以后

stack = [ 'div' , 'section']
复制代码

看看 start 能够知道，此时 currentParent = section

而后匹配到 ，则移除 stack 中的 section，而且重设 currentParent

stack = ['div']

currentParent = 'div'
复制代码

再匹配到 p 的时候，p 的父节点就是 div，父子顺序就是正确的了

2从新设置 stack 最后一个节点为父节点

处理文本字符串

当 parseHTML 去匹配 < 的时候，发现 template 不是 <，template开头 到 < 还有一段距离

那么这段距离的内容就是 文本了，那么就会把这段文本传给 chars 方法处理

来看看源码

function chars(text) {    



    // 必须存在根节点，不可能用文字开头

    if(!currentParent) return



    var children = currentParent.children;    



    // 经过 parseText 解析成字符串，判断是否含有双括号表达式，好比 {{item}}

    // 若是是有表达式，会存放多一些信息，
    var res = parseText(text)    



    if(res) {

        children.push({            

            type: 2,            

            expression: res.expression,            

            tokens: res.tokens,            

            text: text

        });
    }    



    // 普通字符串，直接存为 字符串子节点

    else if(
      !children.length ||
      children[children.length - 1].text !== ' '
    ) {
        children.push({            

            type: 3,            

            text: text

        });
    }
}
复制代码

这段代码主要做用就是，为 父节点 添加 文本子节点

而文本子节点分为两种类型

一、普通型，直接存为文本子节点

二、表达式型，须要通过 parseText 处理

直接以结果来定义吧

好比处理这段文本

{{isShow}}

{    

    expression: toString(isShow)

    tokens: [{@binding: "isShow"}]
}
复制代码

主要是为了把表达式 isShow 拿到，方便后面从实例上获取值

好的，如今，template 处理流程所涉及的主要方法都讲完了

如今用上面这些函数来走一个流程

如今有一个模板

<div>11 </div>
复制代码

1 开始循环 tempalte

匹配到第一个 头标签 （

），传入 parse-start，生成 对应的 ast

该 div 的 ast 变成根节点 root，并设置其为当前父节点 currentParent，保存进节点缓存数组 stack

此时

stack = [ { tag:'div' , children:[ ] } ]
复制代码

第一轮处理结束，template 截断到第一次匹配到的位置

此时，template = 11

2 开始第二次遍历

开始匹配 <，发现 < 不在开头，而 开头位置 到 < 有一段普通字符串

调用 parse-char，传入字符串

发现其没有 双括号表达式，直接给父节点添加简单子节点

currentParent.children.push({ type:3 , text:'11' })
复制代码

此时

stack =[ { tag:'div' , children:[ { type:3 , text:'11' } ] } ]
复制代码

第二轮处理结束，template 截断到刚刚匹配完的字符串

此时，template =

3 开始第三轮遍历

继续寻找 <，发现就在开头，可是这是一个结束标签，标签名是 div

由于 stack 是节点顺序存入的，这个结束标签确定属于 stack 最后一个 标签

因为 该标签匹配完毕，因此从 stack 中移除

而且设置 当前父节点 currentParent 为 stack 倒数第二个

第三次遍历结束，template 继续截断

此时 template 为空了，结束全部遍历

返回这次 tempalte 解析的 root

{ 
    tag:'div',type :1 , 
    children:[ { type:3 , text:'11' } ] 
}
复制代码

因而 parse 就成功把 tempalte 解析成了 ast ，就是 root

总结

本问讲的是 parse 的主要流程，忽略了内部的处理细节，好比怎么解析标签，怎么解析属性，其余内容都会独立成文章

在 parse 的流程中，大体有五个函数，咱们屡一下，以下

parse，parseHTML，start，end，chars

parse 是整个 parse 流程的总函数

parseHTML 是 parse 处理的主力函数

start，end，chars 是 在 parse 中传给 parseHTML ，用来帮助处理 匹配的标签信息的函数，这三个函数会在 parseHTML 中被调用

最后

鉴于本人能力有限，不免会有疏漏错误的地方，请你们多多包涵，若是有任何描述不当的地方，欢迎后台联系本人，有重谢

公众号
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程