深入浅出Vue.js阅读——模板编译原理——解析器

最新推荐文章于 2024-01-29 11:49:29 发布
原创 最新推荐文章于 2024-01-29 11:49:29 发布 · 449 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

解析器

1. 解析器的作用

  解析器要实现的功能是将模板解析成AST
例如：

<div>
	<p>{{name}}</p>
</div>

转换成AST后的样子如下：

{
    "tag":"div",
    "type":1,
    "staticRoot":false,
    "static":false,
    "plain":true,
    "parent":undefined,
    "attrsList":[],
    "attrsMap":{},
    "children":[
        {
            "tag":"p",
            "type":1,
            "staticRoot":false,
            "static":false,
            "plain":true,
            "parent":{
                "tag":"div"
            },
            "attrsList":[],
            "attrsMap":{},
            "children":[
                {
                    "type":2,
                    "text":{{name}}",
                    "static":false,
                    expression:"_s(name)"
                }
            ]
        }
    ]
}

AST :
  用JavaScript中的一个对象来描述一个节点,一个对象表示一个节点,对象中的属性用来保存节点所需的各种数据。
  例如，parsen属性保存了父节点的描述对象，children属性是一个数组，里面保存了一些子节点的描述对象，tyoe属性表示一个节点的类型。当很多独立的属性通过parent属性和children属性连接在一起时，就变成了一个树，而这样一个用对象描述的节点树其实就是AST。

2. 解析器内部运行原理

  解析器内部分为好多子解析器，比如HTML解析器、文本解析器、过滤器解析器等，最主要的是HTML解析器。HTML解析器的作用是解析HTML，它在解析HTML的过程中会不断触发各种钩子函数。这些钩子函数包括开始标签钩子函数、结束标签钩子函数、文本钩子函数以及注释钩子函数。
伪代码如下：

parseHTML(template,{
    start(tag,attrs,unary){
        // 每当解析到标签的开始位置时，触发该函数
    },
    end(){
        // 每当解析到标签的结束位置时，触发该函数
    },
    chars(text){
        // 每当解析到文本时，触发该函数
    },
    comment(text){
        // 每当解析到注释时，触发该函数
    }
})

  举个例子：

<div><p>我是mgd</p></div>

  当这个模板被HTML解析器解析时，所触发的钩子函数依次是：start、start、插入式、end、end。
  解析器其实是从前向后解析的。解析到<div>时，会触发一个标签开始的钩子函数start；然后解析到<p>，又触发一次钩子函数start；接着解析到文本，触发文本钩子函数chars；然后解析到</p>，触发标签结束的钩子函数end;接着继续解析到</div>；又触发一个标签结束的钩子函数end，解析结束。

3. HTML解析器

1. 运行原理

  解析HTML模板的过程就是循环的过程，简单来说就是用HTML模板字符串来循环，每轮循环都从HTML模板中截取一小段字符串，然后重复上述过程，直到HTML模板被截成一个空字符串时结束循环，解析完毕。
  在截取一小段字符串时，有可能截取到开始标签，也有可能截取到结束标签，又或者是文本或者注释，我们可以根据截取的字符串的类型来触发不同的钩子函数。

2.截取开始标签

  每一轮循环都是从模板的最前面截取，所以只有模板以开始标签开头，才需要进行开始标签的截取操作。
如何确定模板是不是以开始标签开头?
  判断HTML模板是不是以<开头:
HTML的第一个字符是不是<?

  • 不是：
    一定不是以开始标签开头的模板，所以不需要进行开始标签的截取操作。
  • 是：
    • 以开始标签开头的模板
    • 以结束标签开头的模板
    • 注释
        需要进一步确定模板是不是以开始标签开头，还需要借助正则表达式来分辨模板的开始位置是否符合开始标签的特征。
        如何使用正则表达式来匹配模板以开始标签开头：
const ncname = '[a-zA-Z_][\\w\\-\\.]*';
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)

// 以开始标签开始的模板
let str = '<div></div>';
let obj = str.match(startTagOpen) 
console.log(obj); //["<div", "div", index: 0, input: "<div></div>", groups: undefined]

  在分辨出模板以开始标签开始后，需要将标签名、属性以及自闭合标识解析出来。
  当完成解析之后，我们可以得到这样一个数据结构：

const start = str.match(startTagOpen)
if(start){
    const match = {
        tagName:start[1],
        attrs:[]
    }
}

  事实上，开始标签被拆分成三个小部分，分别是标签名、属性和结尾。
  通过“标签名”这一字段，就可以分辨出模板是否以开始标签开头，此后想要得到属性和自闭合标识需要进一步解析。

1. 解析标签属性

  在分辨出模板以开始标签开头之后，会将开始标签中的标签名这一小部分截取掉，因此在解析标签属性时，我们得到的模板是下面的样子：

` class="box"></div>`

  下面的伪代码展示了如何解析开始标签中的属性，但是只能解析一个：

const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|+'([^']*)'+|([^\s"'=<div>`]+)))?/
let html = `    class="box"></div>`;
let attr = html.match(attribute);
html = html.substring(attr[0].length);
console.log(attr,html);

  为了解决只能解析一个属性的问题，可以每解析一个属性就截取一个属性。如果截取完后，剩下的HTML模板依然符合标签属性的正则表达式，那么说明还有剩余的属性需要处理，此时就重复执行前面的流程，知道剩余的，模板不存在属性。也就是剩余的模板不存在符合正则表达式所预设的规则。

const startTagClose = /^\s*(\/?)>/;
const attribute = /^\s*([^\s"'<div>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<div>`]+)))?/
let html = `    class="box" id="el"></div>`;
let end,attr
const match = {tagName:'div',attrs:[]}
while(!(end=html.match(startTagClose)) && (attr = html.match(attribute))){
   html = html.substring(attr[0].length);
   match.attrs.push(attr);
}
console.log(match,html);

  如果剩余HTML模板不符合开始标签结尾部分的特征，并且符合标签属性的特征，那么进入到循环中进行解析与截取操作。

2. 解析自闭合标识

  自闭和标签是没有子节点的，所以我们提到构建AST层级时，需要维护一个栈，而一个节点是否需要推入到栈中，可以使用这个自闭合标识来判断。
  如何解析开始标签中的结尾部分：

function parseStartTagEnd(html){
    const startTagClose = /^s*(\/?)/;
    const end = html.match(startTagClose);
    const match = {};
    if(end){
        match.unanySlash = end[1];
        html = html.substring(end[0].length);
        return match;
    }
}
console.log(parseStartTagEnd('></div>'));//{unarySlash:""}
console.log(parseStartTagEnd('/><div></div>'));//{unarySlash:"/"}

  从代码中打印出来的结果看，闭合标签解析后的unartSlash属性为/,而非闭合标签为空字符串。

3. 实现源码

  下面的代码是Vue.js中解析开始标签的源码：

const ncname = '[a-zA-Z_][\\w\\-\\.]';
const qnameCapture = `((?:${ncname}\\:)?${ncname})`;
const startTagOpen = new RegExp(`^<${qnameCapture}`);
const startTagClose = /^\s*(\/?)>/;
function advance(n){
    html = html.substring(n);
}
function parseStartTag(){
    // 解析标签名，判断模板是否符合开始标签的特征
    const start = html.match(startTagOpen);
    if(start){
        const match= {
            tagName:start[1],
            attrs:[]
        }
        advance(start[0].length);

        // 解析标签属性
        let end,attr;
        while(!(end = html.match(startTagClose)) && (attr = html.match(attribute))){
            advance(attr[0].length);
            match.attrs.push(attr);
        }

        // 判断该标签是否是自闭和属性
        if(end){
            match.unarySlash = end[1];
            advance(end[0].length);
            return match;
        }
    }
}

  调用parseStartTag就可以将剩余模板开始部分的开始标签解析出来。如果剩余HTML模板的开始部分不符合开始标签的正则表达式规则，那么调用parseStartTag就会返回undefined。因此，判断剩余模板是否符合开始标签的规则，只需要调用parseStartTag即可。如果调用它之后得到了解析结果，那么说明剩余模板的开始部分符合开始标签的规则，此时将解析出来的结果取出来并调用钩子函数start即可：

// 开始标签
const startTagMatch = parseStartTag();
if(startTagMatch){
    handleStartTag(startTagMatch);
    continue;
}

  从代码中可以，如果调用parseStartTag之后有返回值，那么会进行开始标签的处理，其处理逻辑主要在handleStartTag中。这个函数的主要目的就是tagName、attrs、unary等数据取出来，然后调用钩子函数将这些数据放到参数中。

3. 截取结束标签

  如何分辨模板已经截取到结束标签：
  道理和开始标签的原理相同，只有HTML模板的第一个字符是<时，我们才需要进一步确认它到底是不是结束标签。
  我们只需要判断剩余HTML模板的开始位置是否符合正则表达式中定义的规则即可：

// 截取结束标签
const ncname = '[a-zA-Z_][\\w\\-\\.]*';
const qnameCapture = `((?:${ncname}\\:)?${ncname})`;
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`);
const  endTagMatch = '</div>'.match(endTag);
const endTagMatch2 = '<div>'.match(endTag);
console.log(endTagMatch); //["</div>", "div", index: 0, input: "</div>", groups: undefined]
console.log(endTagMatch2); //null

  以上代码可以分辨出剩余模板是否是结束标签，当分辨出结束标签后，需要做两件事，一件事是截取模板，另一件事是触发钩子函数。Vue.js中相关源码被精简后如下：

const endTagMatch =html.match(endTag);
if(endTagMatch){
    html = html.substring(endTagMatch[0].length);
    options.end(endTagMatch[1]);
    continue;
}

  可以看出，先对模板进行截取，然后触发钩子函数。

4. 截取注释

  分辨模板是否已经截取到注释的原理与开始标签和结束标签的原理相同，先判断剩余HTML模板的第一个字符是不是<,如果是，再用正则表达式来进一步匹配：

// 注释截取
const comment = /^<!--/;
if(comment.test(html)){
    const commentEnd = html.indexOf('-->');
    if(commentEnd>=0){
        if(options.shouldKeepComment){
            options.comment(html.substring(4,commentEnd));
        }
    }
    html = html.substring(commentEnd+3);
    continue;
}

  在上面的代码中，我们使用正则表达式来判断剩余的模板是否符合注释的规则，如果符合，就将这段注释文本截取出来。
  这里有一个有意思的地方，那就是注释的钩子函数可以通过选项来配置，只有options，shouldKeepComment为真时，才会触发钩子函数，否则只截取模板，不触发钩子函数。

5. 截取条件注释

  条件注释不需要触发钩子函数，我们只需要把它截取掉就可以了。
  截取条件注释的原理与截取注释非常相似，如果模板的第一个字符是<，并且符合我们事先用正则表达式定义好的规则，就说明需要进行条件注释的截取操作。
  在下面的代码中，我们通过indexOf找到条件注释结束位置的下标，然后将结束位置前的字符都截取掉：

// 截取条件注释
const conditionalComment = /^<!\[/;
if(conditionalComment.test(html)){
    const conditionalEnd = html.indexOf(']>');
    if(conditionalEnd>=0){
        html = html.substring(conditionalEnd+2);
        continue;
    }
}

举个例子：

// 举个例子
const conditionalComment = /^<!\[/;
let html = '<![if !IE]><link href="non-ie.css" rel="stylesheet"><![endif]>';
if(conditionalComment.test(html)){
    const conditionalEnd = html.indexOf(']>');
    if(conditionalEnd>=0){
        html = html.substring(conditionalEnd+2);
        // continue;
    }
}
console.log(html); //<link href="non-ie.css" rel="stylesheet"><![endif]>

  从打印出的结果看，HTML中的条件注释部分被截取掉了。
  通过这个逻辑可以发现，在Vue.js中条件注释其实没有用，写了也会被截取掉，通俗一点说就是写了也白写。

6. 截取DOCTYPE

  DOCTYPE与条件注释相同，都是不需要触发钩子函数的，只需要将匹配到的这一字段截取掉即可。下面的代码将DOCTYPE这=段字符匹配出来后，根据它们的length属性来决定要截取多长的字符串：

// 截取DOCTYPE
const doctype = /^<!DOCTYPE [^>]+>/i;
const doctypeMatch = html.match(doctype);
if(doctypeMatch){
    html = html.substring(doctypeMatch[0].length);
    continue;
}

举个例子：

const doctype = /^<!DOCTYPE [^>]+>/i;
let html = '<!DOCTYPE html><html lang="en"><head></head><body</body></html>'
const doctypeMatch = html.match(doctype);
if(doctypeMatch){
    html = html.substring(doctypeMatch[0].length);
}
console.log(html); //<html lang="en"><head></head><body</body></html>

7. 截取文本

  在前面的其他标签类型中，我们都会判断剩余HTML模板的第一个字符是否是<，如果是，再进一步确认到底是哪一种类型。这是因为以<开头的标签类型太多了。然而文本只有一种，如果HTML，模板的第一个字符不是<，那么它一定是文本了。
  如何从模板中将文本解析出来呢？我们只需要找到下一个<在什么位置，这之前的所有字符都属于文本。

while(html){
    let text;
    let textEnd = html.indexOf('<');
    // 截取文本
    if(textEnd >= 0){
        text = html.substring(0,textEnd);
        html = html.substring(textEnd);
    }
    // 如果模板中找不到<,就说明整个模板都是文本
    if(textEnd<0){
        text = html;
        html = '';
    }
    // 触发钩子函数
    if(options.chars && text){
        options.chars(text);
    }
}

上面的代码逻辑有三部分：

  • 截取文本：
    <之前的所有字符都是文本，直接使用html.substring从模板的最开始位置截取到<之前的位置，就可以将文本截取出来。
  • 如果在整个模板中都找不到<,那么说明整个模板全是文本。
  • 触发钩子函数，并将截取出来的文本放到参数中。

问题：如果<是文本的一部分，该如何处理？

while(html){
    let text,rest,next;
    let textEnd = html.indexOf('<');
    // 截取文本
    if(textEnd>=0){
        rest = html.slice(textEnd);
        while(
            !endTag.test(rest)&&
            !startTagOpen.test(rest)&&
            !comment.test(rest)&&
            !conditionalComment.test(rest)
        ){
            // 如果'<'在纯文本中，将它视为纯文本对待
            next = rest.indexOf('<',1);
            if(next<0) break;
            textEnd +=next;
            rest =html.slice(textEnd);
        }
        text = html.substring(0,textEnd);
        html = html.substring(textEnd);
    }
    // 如果模板中找不到<,那么说明整个模板都是文本
    if(textEnd<0){
        text =html;
        html = '';
    }
    // 触发钩子函数
    if(options.chars && text){
        options.chars(text);
    }
}

  在代码中，我们通过while来解决这个问题(注意是里面的while)。如果剩余的模板不符合任何被解析的类型，那么重复解析文本，直到剩余模板符合被解析的类型为止。
  在上面的代码中，endTag、startTagOrigin、comment、conditionalComment都是正则表达式，分别匹配结束标签、开始标签、注释和条件注释。

8. 纯文本内容元素的处理

  前面介绍开始标签、结束标签、文本、注释的截取时，其实都是默认当前需要截取的元素的父级元素不是纯文本内容元素。事实上，要截取元素的父级元素是纯文本内容元素的话，处理逻辑将完全不一样。在while循环中，就是父级元素是不是纯文本元素内容。

while(html){
    if(!lastTag || !isPlainTextElement(lastTag)){
        // 父元素为正常元素的处理逻辑
    }else{
        // 父元素为script、style、textarea的处理逻辑
    }
}

  当父元素是script这种纯文本内容元素时，会进入到else这个语句里面。由于纯文本内容元素都被视作文本处理，所以我们的处理逻辑就变得很简单，只需要把这些文本截取出来并触发钩子函数chars，然后再将结束标签截取出来并触发钩子函数end。
  也就是说，如果父标签是纯文本内容元素，那么本轮循环会一次性将这个父标签给处理完毕。
伪代码如下：

while(html){
    if(!lastTag || !isPlainTextElement(lastTag)){
        // 父元素为正常元素的处理逻辑
    }else{
        // 父元素为 script、style、textarea的处理逻辑
        const stackedTag = lastTag.toLowerCase();
        const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</'+stackedTag + '[^>]*>','i'))
        const rest = html.replace(reStackedTag,function(all,text){
            if(options.chars){
                options.chars(test);
            }
            return '';
        })
        html = rest;
        options.end(stackedTag);
    }
}

  上面代码中的正则表达式可以匹配结束标签前包括结束标签自身在内的所有文本。
  我们可以给replace方法的第二个参数传递一个函数，在函数中，我们得到了参数text(表示结束标签前的所有内容)，触发了钩子函数chars并把text放到钩子函数的参数中传出去。最后，返回了一个空字符串，说明将匹配到的内容都截掉了。注意，这里的截掉会将内容和结束标签一起截取掉。
  最后，调用钩子函数end并将标签名放到参数中传出去，这说明本轮循环中的所有逻辑都已经处理完毕。

9. 使用栈维护DOM层级

  HTML解析器内部也有一个栈来维护DOM的关系，就是每解析到开始标签，就向栈中推进去一个；每解析到结束标签，就弹出来一个。所以，想取到父元素并不难，只需要拿到栈中的最后一个就行。
  HTML解析器中的栈还有一个作用，它可以检测出HTML标签是否正确闭合。

10. 整体逻辑

  HTML解析器最终的目的是实现这样的功能：

parseHTML(template,{
    start(tag,attrs,unary){
        // 每当解析到标签的开始位置时，触发该函数
    },
    end(){
        // 每当解析到标签的结束位置时，触发该函数
    },
    chars(text){
        // 每当解析到文本时触发该函数
    },
    comment(text){
        // 每当解析到注释时，触发该函数
    }
});

  在循环中，首先要判断父元素是不是纯文本内容元素，因为不同类型父节点的解析方式将完全不同：

export function parseHTML(html,options){
    while(html){
        if(!lastTag || !isPlainTextElement(lastTag)){
            // 父元素为正常元素的处理逻辑
        }else{
            // 父元素为script、sytle、textarea的处理逻辑
        }
    }
}

  如果父元素为正常的元素，那么有几种情况需要分别处理，比如需要分辨出当前要解析的一小段模板到底是什么类型。
  我们把所有需要处理的情况都列出来，有下面几种情况：

  • 文本
  • 注释
  • 条件注释
  • DOCTYPE
  • 结束标签
  • 开始标签
      我们会发现这些需要处理的类型中，处理文本之外，其他都是以标签形式存在的，而标签是以<开头的。
      所以逻辑就很清晰了，我们先根据<判断需要解析的字符是文本还是其他的：
export function parseHTML(html,options){
    while(html){
        if(!lastTag || !isPlainTextElement(lastTag)){
            let textEnd = html.indexOf("<");
            if(textEnd=== 0){
                // do something
            }
            let text,rest,next;
            if(textEnd < 0){
                text = html;
                html = '';
            }
            if(options.chars && text){
                options.chars(text)
            }
        }else{
            // 父元素为script、sytle、textarea的处理逻辑
        }
    }
}

  如果通过<分辨出即将解析的这一小部分字符不是文本而是标签类，那么标签类有那么多类型，我们需要进一步分辨具体是哪种类型：

export function parseHTML(html,options){
    while(html){
        if(!lastTag || !isPlainTextElement(lastTag)){
            let textEnd = html.indexOf("<");
            if(textEnd === 0){
                // 注释
                if(connent.test(html)){
                    // 注释的处理逻辑
                    continue;
                }
                // 条件注释
                if(conditionalComment.test(html)){
                    // 条件注释的处理逻辑
                    continue;
                }
                //DOCTYPE
                const doctypeMatch = html.match(doctype);
                if(doctypeMatch){
                    // DOCTYPE的处理逻辑
                    continue;
                }
                // 结束标签
                const endTagMatch = html.match(endTag)
                if(endTagMatch){
                    // 结束标签的处理逻辑
                    continue;
                }
                // 开始标签
                const startTagMatch = parseStartTag();
                if(startTagMatch){
                    // 开始标签的处理逻辑
                    continue;
                }
                let text,rest,next;
                if(textEnd>=0){
                    // 解析文本
                }
                if(textEnd<0){
                    text =html;
                    html = '';
                }
                if(options.chars && text){
                    options.chars(text);
                }
            }else{
                // 父元素为script、style、textarea的处理逻辑
            }
        }
    }
}

4. 文本解析器

  文本解析器的作用是解析文本，文本解析器是对HTML解析器解析出来的文本进行二次加工。
文本分为两种类型:

  1. 纯文本
  2. 带变量的文本

  HTML解析器在解析文本时，并不会区分文本是否带变量。
  如果是纯文本，不需要进行任何处理；如果是带变量的文本，那么需要使用文本解析器进一步解析。带变量的文本在使用虚拟DOM进行渲染时，需要将变量替换成变量中的值。
  之前说过，当HTML解析器解析到文本的时候，都会触发chars函数，并且从参数中得到解析出的文。在chars函数中，我们需要构建文本类型的AST，并将它添加到父节点的children属性中。
  在构建文本类型的AST时，纯文本和带变量的文本是不同的处理方式。如果是带变量的文本，我们需要借助文本解析器对它进行二次加工，代码如下:

parseHTML(template,{
    start(tag,attrs,unary){
        // 每当解析到标签的开始位置时，触发该函数
    },
    end(){
        // 每当解析到标签的结束位置时，触发该函数
    },
    chars(text){
        text = text.trim();
        if(text){
            const children = currentParent.children;
            let expression;
            if(expression = parseText(text)){
                children.push({
                    type:2,
                    expression,
                    text
                })
            }else{
                children.psuh({
                    type:3;
                    text
                })
            }
        }
    },
    comment(text){
        // 每当解析到注释时，触发该函数
    }
})

  在chars函数中，如果执行parseText后有返回结果,则说明文本是带变量的文本，而且已经通过文本解析器(parseText)二次加工，此时构建一个带变量的文本类型的AST并将其添加到父节点的children属性中。而代码中的currentParent是当前节点的父节点，也就是前面介绍的栈中的最后一个节点。
  假设chars函数被触发后，我们得到的text是一个带变量的文本：

'Hello {{name}}'

  这个带变量的文本被解析器触发之后，得到的expression变量是这样的：

'Hello '+_s(name)

  _s函数：

function toString(val){
    return val ==null
        ? ""
        :typeof val === 'object'
            ? JSON.stringify(val,null,2)
            :String(val)
}

  假设当前上下文中有一个变量name,值为:mgd，那么expression中的内容被执行时，它的内容是不是就是Hello mgd了？
举个栗子：

var obj = {name:'mgd'};
with(obj){
    function toString(val){
        return val ==null
            ? ""
            :typeof val === 'object'
                ? JSON.stringify(val,null,2)
                :String(val)
    }
    console.log("Hello " + toString(name));//Hello mgd
}

  在文本解析器中，第一步要做的事情就是使用正则表达式来判断文本是否为带变量的文本，也就是检测文本中是否包含{{xxx}}这样的语法。如果是纯文本，则直接返回undefined;如果是带变量的文本，再进行二次加工，所以代码长这样：

function parseText(text){
    const tagRE = /\{\{((?:.|\n)+?)\}\}/g
    if(!tagRE(text)){
        return;
    }
}

思考： 如果是一个带变量的文本，该如何处理？
  思路是使用正则表达式匹配出文本中的变量，先把变量左边的文本添加到数组中，然后把变量改成_s(x)这样的形式也添加到数组中。如果变量后面还有变量，则重复以上动作，直到所有变量都添加到数组中。如果最后一个变量后面有文本，就将它添加到数组中。
  这时我们其中已经有一个数组，数组元素的顺序和文本的顺序是一致的，此时将这些数组元素用+连接起来变成字符串，就可以得到最终想要的效果。
代码实现如下：

function parseText(text){
    const tagRE = /\{\{((?:.|\n)+?)\}\}/g
    if(!tagRE(text)){
        return;
    }
    const tokens = [];
    let lastIndex = tagRE.lastIndex = 0;
    let match,index;
    while(match = tagRE.exec(text)){
        index = match.index;
        // 先把{{前面的文本添加到数组中
        if(index>lastIndex){
            tokens.push(JSON.stringify(text.slice(lastIndex,index)))
        }
        // 把变量改成_s(x)这样的形式页添加到数组中
        tokens.push(`_s(${match[1].trim()})`);
        // 设置lastIndex来保证下一轮循环时，正则表达式不再重复匹配已经解析过的文本
        lastIndex = index+match[0].length;
    }

    // 当所有变量都处理完毕后，如果最后一个变量右边还有文本，那就将文本添加到数组中'
    if(lastIndex<text.length){
        tokens.push(JSON.stringify(text.slice(lastIndex)));
    }
    return tokens.join("+");
}

  这段代码有一个很关键的地方在lastIndex：每处理完一个变量后，会重新设置lastIndex的位置，这样可以保证如果后面还有其他变量，那么下一轮循环时可以从lastInedex的位置开始向后匹配，而lastIndex之前的文本将不再被匹配。

5. 总结

  1. 解析器的作用是通过模板得到AST(抽象语法树)
  2. 生成AST的过程需要借助HTML解析器，当HTML解析器触发不同的钩子函数时，我们可以构建出不同的节点。
  3. 随后，我们可以通过栈来得到当前正在构建的节点的父节点，然后将构建出的节点添加到父节点的下面。
  4. 最终，HTML解析器运行完毕后，我们就可以得到一个完整的带DOM层级关系的AST。
  5. HTML解析器的内部原理是一小段一小段地截取模板字符串，每截取一小段模板字符串，就会根据截取出来的字符串类型触发不同的钩子函数，直到模板字符串截空停止运行。
  6. 文本分为两种类型，不带变量的纯文本和带变量的文本，后者需要文本解析器进行二次加工。
【Vue2深度学习】模板编译篇-解析器
Web_boom的博客
09-19 538
在前面的学习中，我们知道，Vue的模板编译，分为解析器、优化器、代码生成器三个模块依次来实现。今天，我们先来深入了解一下解析器。解析器，就是把模板，根据一定的解析规则解析出有效的信息，最后用这些信息形成AST（保存了节点所需的各种数据的一个JS对象）。在模板内，除了有常规的HTML标签外，还会有一些文本信息以及在文本信息中包含的过滤器。这些不同的内容在解析起来需要不同的解析规则，所以解析器不只一个，除了有解析常规HTML的HTML解析器，还有解析文本的文本解析器以及解析过滤器的过滤器解析器。
模板解析
阳光下的冷静的博客
04-23 523
1.模板解析的关键对象: compile对象 模板解析的基本流程: 将el的所有子节点取出, 添加到一个新建的文档fragment对象中 对fragment中的所有层次子节点递归进行编译解析处理(主要对应的init()函数) 《1》对大括号表达式文本节点进行解析 《2》对元素节点的指令属性进行解析 《2.1》 事件指令解析 《2.2》 一般指令解析 将解析后的fragment添加到el...
深入浅出Vue.js：第9章 (第③篇 模板编译原理）解析器
SevenLee的个人博客
01-07 197
解析器的作用 解析器要实现的功能就是将模板解析成AST。AST类似vnode只是用JavaScript中的对象来描述一个节点。 解析器内部的运行原理 解析器中最主要的就是HTML解析器，它在解析HTML过程中会不断触发各种钩子函数。 parseHTML(template,{ start(tag,attrs,unary){ //三个参数分别是标签名，标签属性，是否是自闭合标签 //每当解析到标签的开始位置触发的钩子函数 }, end(){
模板解析器
weixin_30725467的博客
05-05 340
var greeting = 'My name is ${name}, age ${age}, I am a ${job.jobName}'; var employee = { name: 'XiaoMing', age: 11, job: { jobName: 'designer', jobLevel: 'senior' } }; var ...
js数据模板解析器
热门推荐
ggboy的博客
12-19 4万+
/** * 模板解析器 * @param html * @param options * @returns */ function templateEngine(html, options) { var re = /<!([^!>]+)?!>/g, reExp = /(^( )?(if|for|else|switch|case|formatDat...
VUE2.0 模板编译原理（二）：优化器
denglouhen的博客
10-20 351
二、优化器 优化器的作用是在AST中找到静态子树并打上标记，即那些永远不会发生变化的节点，例如纯文本节点。 打标记的作用： 在生成VNode的过程中，除了首次渲染，每次重新渲染，不需要为静态子树创建新节点，会直接克隆已存在的静态子树； 虚拟DOM的patch过程中可以跳过，因为没有比较的必要，它是不变的，节省js脚本运算成本。 实现的主要步骤： 在AST中找到所有静态节点并标记； 在AST中找到所有静态根节点并标记。 在AST中，static属性为true的就是静
Vue技巧大全
donglize521521的博客
07-19 2716
Vue面试题大全 1.单页应用SPA和多页应用MPA 单页应用（SPA） 1.概念和原理 **概念：**第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。 原理：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候
Spring Boot + Vue 开发部署全过程记录
季秀的博客
04-27 2135
前后端开发分离，部署 All in one jar 前后端分离 前后端分离的开发模式不同于以往严重依赖后端的模式，前者使得前端更加“智能”，能做的事情更多，后端只需要作为一个能回答问题的服务即可。前后端分离模式一般是基于单页应用（SPA-Single Page Application）。单页应用在第一次访问服务器时，就将整个应用涉及到的“所有页面”都发往前端，后续和服务器的交互只是涉及数据的往来，...
前端知识宝典
最新发布
qq_37759901的博客
01-29 1707
搜索框输入，文本剪辑器实时保存代码实现思路如下：（利用定时器，每次触发先清掉以前的定时器，从新开始）
JavaScript 前端面试题！！！
木木木森林
10-29 876
JavaScript 前端面试精华1. 介绍 js 的基本数据类型。2. JavaScript 有几种类型的值？你能画一下他们的内存图吗？3. 什么是堆？什么是栈？它们之间有什么区别和联系？4. 内部属性 [[Class]] 是什么5. 介绍 js 有哪些内置对象？6. undefined 与 undeclared 的区别？7. null 和 undefined 的区别？8. 如何获取安全的 undefined 值？9. 说几条写 JavaScript 的基本规范？10. JavaScript 原型，原型链
[Vue源码解析] 解析器
zy的博客
11-28 336
[Vue源码解析] 解析器 解析器类型：HTML解析器、文本解析器、注释解析器 原理：将模版字符串按照一定的条件循环进行切割，对切割下来的内容进行类型判断，在生产对应类型的AST节点插入到父节点上，直到切割完毕最终生成一颗AST树。 逻辑概览： /** * 整体逻辑 */ export function parseHTML (html, options) { while (html) { if (!lastTag || !isPlainTextElement(lastTag)) {
模板分析
baihacker的专栏
11-26 1974
template int FOO(T, const U*) {return 1;} template int FOO(int, const char*) {return 12;} const char* b;     cout 结果是啥? template int FOO(T, const U*) {return 1;} template int FOO(int
学习vue源码（7）手写解析器
weixin_43964148的博客
06-03 505
通过【学习vue源码（6）熟悉模板编译原理https://mp.weixin.qq.com/s?__biz=MzU5NDM5MDg1Mw==&tempkey=MTA2M180elNwek5mRjhkNXptdXFaS2l0U014cnFwVDRtVkdfQ2dsaTVrOGdEVVU5WjZIUzdnYWR2aklESmoyc2xmMmlpYzllSjQzRnZPMUN1WWxLdGJ5MlJvSGxyd0N4ZnF1cEVEM2NIMG5uR203elBsaEhLaDBzRkZMeTl3Nnot.
vue源码学习（四）模板编译之解析器
zxl1990_ok的博客
11-30 429
function set (target, key, val) { if (isUndef(target) || isPrimitive(target) { console.warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target)))); } if (Array.isArray(target) && isValidArrayInd.
Vue解析器概述
qq_39411967的博客
08-06 993
研究Vue源码时看到如下这个正则 var 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/；发现与虚拟...
javascript编写自己的模板解析器
da宗熊专栏
07-04 2306
编写自己的模板解析器因为最近在研究artTemplate，ejs，baaiduTemplate等模板，所以，一时兴起，自己也写了个简单的模板解析器。一个最基本的模板解析器，需要有什么功能呢？ 读取变量值 解析模板语句 按照这个思路，我们编写一个简单的解析器，需求如下: 读值: <%= 变量名 %> 语句支持: <% if( type == 1 ){ %> good! <%}%> 总体来说，就是如果模
[Vue源码]一起来学Vue模板编译原理（二）-AST生成Render字符串
小磊哥er @ 资深研发工程师
12-30 573
本文我们一起通过学习Vue模板编译原理（二）-AST生成Render字符串来分析Vue源码。预计接下来会围绕Vue源码来整理一些文章，如下。 一起来学Vue双向绑定原理-数据劫持和发布订阅 一起来学Vue模板编译原理(一)-Template生成AST 一起来学Vue模板编译原理(二)-AST生成Render字符串 一起来学Vue虚拟DOM解析-Virtual Dom实现和Dom-diff算法 ...
vue template compiler模版解析模块源码解析
章鱼小丸子
01-05 9188
文章目录前言vue模版语法定义语法插值指令vue template compiler模版解析器现状定义结构parserHTML解释器optimizercodegen参考文献 前言 尤雨溪在vue官方文档里对于vue这样定义： Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。 vue.js拥有自身定义的一套模版语法。相信大家一直对于vue的模版解析模块充满...
模板引擎：一、理解Json解析器工作原理
CSDN前端知识共享
07-20 2548
Json解析器 初衷 编写Json解析器目的是为了拓展自己的知识广度，并且通过简单的手写实践，能够深入了解一些技术细节(AST、DFA&amp;amp;amp;NFA、LL(1)文法)，以及便于理解目前主流的前端框架设计。 那么就通过Json，切入正题 Json Json一共定义了四种数据类型：数值类型、字符串类型、数组、对象。 其中，前两者可以归纳为基本类型，后两个可以归纳为复合类型。 不过，...
VUE2.0 模板编译原理（一）：解析器
denglouhen的博客
10-20 1326
vue的template里可以填充变量、表达式、指令，这些在HTML没有的功能就是靠模板编译实现的。模板编译的作用就是将模板转换为渲染函数，渲染函数执行的时候都会生成当前最新的vnode进行页面渲染。 模板--[输入]-->模板编译--[输出]-->渲染函数 这个过程分为三个步骤： 1、解析器：模板解析成AST（抽象语法树）； 2、优化器：遍历AST标记静态节点，这样在虚拟DOM更新节点时避免重新渲染静态节点； 3、代码生成器：使用AST生成render函数。 一、解析
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值