×

vue每日一学:如何处理parseHTML 函数拿到的返回值

作者:andy0012022.08.03来源:Web前端之家浏览:767评论:0
关键词:vuejs

vue每日一学:如何处理parseHTML 函数拿到的返回值。

先看个例子:

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 实体进行解码,将其转换为实体对应的字符。

接下来是:

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 作为参数传递。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20220803a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2