type 3普通文本*/functionparseHTML(html,options){varstack = [];//内部也要有一个栈varindex = 0;//记录的是html当前找到那个索引啦varlast;//用来比对,当这些条件都走完后,如果last==html 说明匹配不到啦,结束while循环varisUnaryTag =false;while(html){ last=html;vartextEnd = html.indexOf('<');...
parse 接收 template 字符串,使用 parseHTML 这个函数在 template 中匹配标签 并传入 start,end,chars 三个函数 供 parseHTML 处理标签等内容 start,end,chars 方法都已经被我抽出来,放在后面逐个说明 下面来看下其中声明的三个变量 1 stack 是一个数组存放模板中按顺序 从头到尾 每个标签的 ast 注:不会存放单...
functionparseHTML(html, options) {// ...letindex =0;letlast, lastTag;while(html) {// ...}parseEndTag(); } 从整体结构上说就是通过从头开始遍历html元素,直至遍历至末尾。最后再调用parseEndTag方法,解析endtag。 再来看while中的逻辑: while(html) { last = html;if(!lastTag || !isPlainText...
parseHTML(template, { ..., start (tag, attrs, unary, start, end) {...}, end (tag, start, end) {...}, chars (text: string, start: number, end: number) {...}, comment (text: string, start, end) {...} }) return root } parse的核心实现是调用了parseHTML函数,且传入了star...
昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而构建vnode,构建指令,实现virtual dom,然后在这基础之上实现双向绑定等。【vuejs深入二】vue源码解析之一,基础源码结构和htmlParse解析器 今天博主就来详细的实现一个拥有核心功能的htmlParse函数,看看它内部的实现逻辑...
parse 函数中的变量 在讲解 parse 函数直接我们还需要先了解下它内部所定义的一些变量以及用途。 functionparse(template, options){ warn$2= options.warn || baseWarn; platformIsPreTag = options.isPreTag || no; platformMustUseProp = options.mustUseProp || no; ...
实际上 Vue 的parseHTML函数是在HTML Parser的基础上做扩展而来的,本身的逻辑较为复杂,为了方便理解,这里先列出它的伪代码及注释说明: exportfunctionparseHTML(html,options){// 上一个标签letlastTag// 循环处理整个 HTMLwhile(html){/*** isPlainTextElement 会检查传入的标签是不是特殊标签,* Vue 中对特殊...
* parseHTML 处理 template 匹配标签,再传入 start,end,chars 等方法 **/ parseHTML(template, { start: (..被抽出,在后面) end: (..被抽出,在后面), // 为 起始标签 开启闭合节点 chars: (..被抽出,在后面) // 文字节点 }); return root ...
parseEndTag:实际上核心逻辑是找到对应开始标签,然后从栈中弹出,但是这里的逻辑却写的相对复杂,是考虑到html异常的一些场景,比如<div><span></div>,此时会把span和div标签都弹出,显然这么做是合理的。 advance:很关键,推动index指针不断往前走 下面看下while中if中的代码 ...
先前我们在 从 Vue parseHTML 所用正则来学习常用正则语法 这篇文章中分析了 parseHTML 方法用到的正则表达式,在这个基础上我们可以继续分析 parseHTML 方法。 先来看该方法整体结构: function parseHTML(html, options) { ...