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' && isNonPhrasingTag(tagName)) {
			parseEndTag(lastTag);
		}
		if (canBeLeftOpenTag$$1(tagName) && 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 < 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)
		};
	}
	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 函数源码解析之解析器遇到结束标签

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何实现生成vue组件，思路和方法是什么

  在我们的印象使用中，vue除了写业务代码没有特别新奇的功能了，今天就来看看如何自动化生成vue组件文档

• Vue-Awesome图标组件的使用和管理是怎样的

  Vue-Awesome 是基于 Vue.js 的 SVG 图标组件，内置图标来自 Font Awesome。本篇随笔先来上一个图标管理的界面效果，然后在逐一进行介绍Element内置图标和Vue-Awesome的图标吧。

• useEffect使用async报错怎么回事，该怎么办

  这篇文章主要为大家介绍了useEffect中为什么不能使用async的原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 小程序购物车功能怎样做，关键要点是什么

  这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• axios怎么判断和取消重复请求？方法是什么？

  这篇文章主要给大家分享解决重复请求的问题，下文给介绍了如何判断重复请求及如何取消重复请求的方法，本文有很详细的介绍，有这方面学习需要的朋友可以参考了解看看。