vue parseHTML 函数拿到返回值后的处理源码解析

vue parseHTML 函数拿到返回值后的处理源码解析

目录

引言

parseStartTag函数返回值

handleStartTag源码

tagName 及unarySlash

调用parser钩子函数

引言

继上篇文章:

parseHTML 函数源码解析

var startTagMatch = parseStartTag(); if (startTagMatch) { handleStartTag(startTagMatch); if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) { advance(1); } continue }

在上个章节中知道startTagMatch 就是获取parseStartTag函数的返回值。并只有在成功匹配到开始标签的情况下parseStartTag 才会返回解析结果(一个对象),否则返回undefined。

假设有如下html(template)字符串:

<div id="box" v-if="watings"></div> parseStartTag函数返回值

则parseStartTag函数的返回值如下:

match = { tagName: 'div', attrs: [ [ 'id="box"', 'id', '=', 'box', undefined, undefined ], [ ' v-if="watings"', 'v-if', '=', 'watings', undefined, undefined ] ], start: index, unarySlash: undefined, end: index } handleStartTag源码

现在我们假设匹配成功,那么if语句块中的代码将会被执行,此时会将解析结果作为参数传递给 handleStartTag 函数,handleStartTag源码如下:

function handleStartTag(match) { var tagName = match.tagName; var unarySlash = match.unarySlash; if (expectHTML) { if (lastTag === 'p' &amp;&amp; isNonPhrasingTag(tagName)) { parseEndTag(lastTag); } if (canBeLeftOpenTag$$1(tagName) &amp;&amp; lastTag === tagName) { parseEndTag(tagName); } } var unary = isUnaryTag$$1(tagName) || !!unarySlash; var l = match.attrs.length; var attrs = new Array(l); for (var i = 0; i &lt; l; i++) { var args = match.attrs[i]; var value = args[3] || args[4] || args[5] || ''; var shouldDecodeNewlines = tagName === 'a' &amp;&amp; args[1] === 'href' ? options.shouldDecodeNewlinesForHref : options.shouldDecodeNewlines; attrs[i] = { name: args[1], value: decodeAttr(value, shouldDecodeNewlines) }; } 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); } } tagName 及unarySlash

handleStartTag函数用来处理开始标签的解析结果,所以它接收parseStartTag函数的返回值作为参数。handleStartTag函数的一开始定义两个常量:tagName 以及 unarySlash:

var tagName = match.tagName; var unarySlash = match.unarySlash;

根据上章节的内容就能理解,tagName 存储解析开始标签的标签名,unarySlash 可以根据他的值判断是解析的开始标签是否为一元标签。

接着是一个if语句块,if语句的判断条件是if (expectHTML),前面说过expectHTML 是parser选项,是一个布尔值,如果为真则该 if 语句块的代码将被执行。但是现在我们暂时不看这段代码,因为这段代码包含 parseEndTag 函数的调用,所以待我们讲解完 parseEndTag 函数之后,再回头来说这段代码。

在往下定义了三个变量:

var unary = isUnaryTag$$1(tagName) || !!unarySlash; var l = match.attrs.length; var attrs = new Array(l);

变量 unary 是一个布尔值,当它为真时代表着标签是一元标签,否则是二元标签。

他们通过isUnaryTag来判断,其原理通过传递的标签名判断是否有跟预设标准HTML中规定的那些一元标签一致。

l 和 attrs ,其中常量 l 的值存储着 match.attrs 数组的长度,而 attrs 常量则是一个与match.attrs数组长度相等的数组。

这两个常量将被用于接下来的for循环中:

for (var i = 0; i < l; i++) { var args = match.attrs[i]; var value = args[3] || args[4] || args[5] || ''; var shouldDecodeNewlines = tagName === 'a' && args[1] === 'href' ? options.shouldDecodeNewlinesForHref : options.shouldDecodeNewlines; attrs[i] = { name: args[1], value: decodeAttr(value, shouldDecodeNewlines) }; }

具体看一下循环体的代码,首先定义 args 常量,它的值就是每个属性的解析结果,即match.attrs 数组中的元素对象。

变量 value 中就保存着最终的属性值,如果第4、5、6 项都没有获取到属性值,那么属性值将被设置为一个空字符串:''。

属性值获取到了之后,就可以拼装最终的 attrs 数组。

attrs 数组的每个元素对象只包含两个元素,即属性名 name 和属性值 value ,对于属性名直接从 args[1] 中即可获取,但我们发现属性值却没有直接使用前面获取到的 value ,而是将传value 递给了decodeAttr 函数,并使用该函数的返回值作为最终的属性值。

decodeAttr 函数的作用是对属性值中所包含的 html 实体进行解码,将其转换为实体对应的字符。关于 shouldDecodeNewlinesForHref 与 shouldDecodeNewlines 可回顾章节

Vue编译器源码分析compileToFunctions作用

接下来是:

if (!unary) { stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs }); lastTag = tagName; }

这个if条件是当开始标签是非一元标签时才会执行,其目的是: 如果开始标签是非一元标签,则将该开始标签的信息入栈,即push到stack数组中,并将lastTag的值设置为该标签名。

在讲解 parseHTML 函数开头定义的变量和常量的过程中,我们讲解过 stack 常量以及lastTage 变量,其目的是将来判断是否缺少闭合标签,并且现在大家应该知道为什么 lastTag 所存储的标签名字始终保存着 stack 栈顶的元素了。

调用parser钩子函数

最后一段代码调用parser钩子函数的:

if (options.start) { options.start(tagName, attrs, unary, match.start, match.end); }

如果 parser 选项中包含 options.start 函数,则调用之,并将开始标签的名字 tagName ,格式化后的属性数组 attrs ,是否为一元标签 unary ,以及开始标签在原 html 中的开始和结束位置match.start 和 match.end 作为参数传递。

接下来我们分析 parse 到结束标签之后会怎么做。

parseHTML 函数源码解析之解析器遇到结束标签

以上就是vue parseHTML 函数源码解析的详细内容,更多关于vue parseHTML 函数的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答