parseHTML函数解析AST基本形成如何深入理解
Admin 2022-08-08 群英技术资讯 484 次浏览
还记得我们在上章节讲的element元素节点的描述对象吗?
var element = { type: 1, tag: tag, parent: null, attrsList: attrs, children: [] }
在源码中定义了一个createASTElement函数,用来创建一个元素的描述对象。
function createASTElement(tag, attrs, parent) { return { type: 1, tag: tag, attrsList: attrs, attrsMap: makeAttrsMap(attrs), parent: parent, children: [] } }
var onRE = /^@|^v-on:/; var dirRE = /^v-|^@|^:/; var forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/; var forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/; var stripParensRE = /^\(|\)$/g; var argRE = /:(.*)$/; var bindRE = /^:|^v-bind:/; var modifierRE = /\.[^.]+/g;
在解析开始标签的时候你遇到的不仅有属性,还有一些Vue 自定义的指令。下面一起来分析下解析指令会有用哪些正则。
onRE
var onRE = /^@|^v-on:/;
匹配以字符 @ 或 v-on: 开头的字符串,主要作用是检测标签属性名是否是监听事件的指令。
dirRE
var const dirRE = /^v-|^@|^:/
匹配以字符 v- 或 @ 或 : 开头的字符串,主要作用是检测标签属性名是否是指令。在Vue中所有以 v- 开头的属性都被认为是指令,另外@字符是 v-on 的缩写,: 字符是 v-bind 的缩写。
forAliasRE
var forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/;
匹配 v-for 属性的值,并捕获 in 或 of 前后的字符串。都是正则大神就不解释怎么捕获的了。
forIteratorRE
var forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
这个也是匹配v-for的属性值,不过比之前要稍微复杂点:列表渲染 v-for(https://cn.vuejs.org/v2/guide/list.html)需要先了解下这个。
//示例:1 <div v-for="(value, name) in object"> {{ name }}: {{ value }} </div> //示例:2 <div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>
没错就是用来捕获,示例1中的:'obj , index' 示例2中的:'value, key, index' 。
stripParensRE
var stripParensRE = /^\(|\)$/g;
这个捕获组用来捕获要么以字符 ( 开头,要么以字符 ) 结尾的字符串,或者两者都满足。那么这个正则的作用是什么呢?我们在讲解正则 forIteratorRE 时有个细节不知道大家注意到了没有,就是 forIteratorRE 正则所匹配的字符串是 'obj, index' ,而不是 '(obj, index)' ,这两个字符串的区别就在于第二个字符串拥有左右括号,所以在使用 forIteratorRE 正则之前,需要使用 stripParensRE 正则去掉字符串 '(obj, index)' 中的左右括号,实现方式很简单:
"(obj, index)".replace(stripParensRE, "")
argRE
var argRE = /:(.*)$/;
argRE正则用来匹配指令编写中的参数,并且拥有一个捕获组,用来捕获参数的名字。
示例:
<div v-on:click.item="handle"></div>
其中 v-on 为指令,click为传递给 v-on 指令的参数,stop 为修饰符。
bindRE
var bindRE = /^:|^v-bind:/;
该正则用来匹配以字符:
或字符串 v-bind: 开头的字符串,主要用来检测一个标签的属性是否是绑定(v-bind)。
modifierRE
var modifierRE = /\.[^.]+/g;
该正则用来匹配修饰符的,但是并没有捕获任何东西,但你可以用match、exec等方法获取与当前正则匹配成功的信息。
在讲解 parse 函数直接我们还需要先了解下它内部所定义的一些变量以及用途。
function parse(template, options) { warn$2 = options.warn || baseWarn; platformIsPreTag = options.isPreTag || no; platformMustUseProp = options.mustUseProp || no; platformGetTagNamespace = options.getTagNamespace || no; transforms = pluckModuleFunction(options.modules, 'transformNode'); preTransforms = pluckModuleFunction(options.modules, 'preTransformNode'); postTransforms = pluckModuleFunction(options.modules, 'postTransformNode'); delimiters = options.delimiters; var stack = []; var preserveWhitespace = options.preserveWhitespace !== false; var root; var currentParent; var inVPre = false; var inPre = false; var warned = false; function warnOnce(msg) { //... } function closeElement(element) { //... } parseHTML(template, { warn: warn$2, expectHTML: options.expectHTML, isUnaryTag: options.isUnaryTag, canBeLeftOpenTag: options.canBeLeftOpenTag, shouldDecodeNewlines: options.shouldDecodeNewlines, shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref, shouldKeepComment: options.comments, start: function start(tag, attrs, unary) {}, end: function end() {}, chars: function chars(text) {}, comment: function comment(text) {}, }); return root }
我们先来看下针对web平台初始化的一些变量。
warn$2 = options.warn || baseWarn; platformIsPreTag = options.isPreTag || no; platformMustUseProp = options.mustUseProp || no; platformGetTagNamespace = options.getTagNamespace || no; transforms = pluckModuleFunction(options.modules, 'transformNode'); preTransforms = pluckModuleFunction(options.modules, 'preTransformNode'); postTransforms = pluckModuleFunction(options.modules, 'postTransformNode'); delimiters = options.delimiters;
继续往下看:
var stack = []; var preserveWhitespace = options.preserveWhitespace !== false; var root; var currentParent; var inVPre = false; var inPre = false; var warned = false;
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
目录一、字符串 split 方法二、使用 URLSearchParams 方法1、解析搜索字符串2、生成搜索字符串3、Node.js 代码三、使用正则匹配方法四、使用第三方库 qs一、字符串 split 方法url地址是字符串形式的,所以利用split方法将参数提取出来,该方法比较常用,而且容易理解(无关正则)let
前几天做到一个关于图片上传功能,下面这篇文章主要给大家介绍了关于vue使用element实现上传图片和修改图片功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。这篇我们主要来看jQuery怎样获取并展示z-index的值?文中有示例代码供大家参考,需要的朋友可以了解看看,接下来就跟随小编一起学习一下吧。
这篇文章主要为大家详细介绍了vue图片拖拉转放大缩小组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章给大家分享的是用jQuery写一个查看图片的功能的内容,可以实现点击左右查看图片效果等等,小编觉得挺实用的,因此分享给大家做个参考,接下来一起跟随小编看看吧。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008