.8-Vue源码之AST（4）
2024-08-25 12:05:21
上一节讲完了超长的start函数，也同时完结了handleStartTag函数，接着continue进入下一轮while循环。
此时剩余的字符串状态如图：
，切掉了<div id='app'>。
再次进入while循环时，发生了一些变化：
// Line-7672
function parseHTML(html, options) {
/* code */ while (html) {
last = html;
if (!lastTag || !isPlainTextElement(lastTag)) {
var textEnd = html.indexOf('<');
// 此时字符串不是以<开头 所以不会进入此条件
if (textEnd === 0) {
// ...
}
var text = (void 0),
rest$1 = (void 0),
next = (void 0);
if (textEnd >= 0) {
// 截取<字符索引 => </div>
rest$1 = html.slice(textEnd);
// 处理文本中的<字符
while (!endTag.test(rest$1) &&
!startTagOpen.test(rest$1) &&
!comment.test(rest$1) &&
!conditionalComment.test(rest$1)
) {
next = rest$1.indexOf('<', 1);
if (next < 0) {
break
}
textEnd += next;
rest$1 = html.slice(textEnd);
}
// 获取中间的字符串 => {{message}}
text = html.substring(0, textEnd);
advance(textEnd);
}
// 当字符串没有<时
if (textEnd < 0) {
text = html;
html = '';
}
// 另外一个函数
if (options.chars && text) {
options.chars(text);
}
} else {
/* code */
} if (html === last) {
/* code */
}
}
// Clean up any remaining tags
parseEndTag(); // fn...
}
第一次进入while循环时，由于字符串以<开头，所以进入startTag条件，并进行AST转换，最后将对象弹入stack数组中。
而这一次，字符串开头为{，所以会继续执行下面的代码。代码将{{message}}作为text抽离出来，并调用了参数中另外一个函数：options.chars。
// Line-8167
function chars(text) {
if (!currentParent) {
// 提示必须有一个DOM根节点
if (text === template) {
warnOnce(
'Component template requires a root element, rather than just text.'
);
}
// 节点外的文本会被忽略
else if ((text = text.trim())) {
warnOnce(
("text \"" + text + "\" outside root element will be ignored.")
);
}
return
}
// IE textarea placeholder bug
if (isIE &&
currentParent.tag === 'textarea' &&
currentParent.attrsMap.placeholder === text) {
return
}
var children = currentParent.children;
// text => {{message}}
text = inPre || text.trim() ?
isTextTag(currentParent) ? text : decodeHTMLCached(text) : preserveWhitespace && children.length ? ' ' : '';
if (text) {
var expression;
if (!inVPre && text !== ' ' && (expression = parseText(text, delimiters))) {
// 将解析后的text弄进children数组
children.push({
type: 2,
expression: expression,
text: text
});
} else if (text !== ' ' || !children.length || children[children.length - 1].text !== ' ') {
children.push({
type: 3,
text: text
});
}
}
}
本函数的核心为parseText对text的处理，即{{message}}。
// Line-7928
function parseText(text, delimiters) {
// 正则选择
var tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE;
// 在这里调用test方法后lasatIndex会变化
if (!tagRE.test(text)) {
return
}
var tokens = [];
var lastIndex = tagRE.lastIndex = 0;
var match, index;
// 匹配到中间的文本
while ((match = tagRE.exec(text))) {
index = match.index;
// 将{{message}}之前的文本push进去
if (index > lastIndex) {
tokens.push(JSON.stringify(text.slice(lastIndex, index)));
}
// 该方法对特殊字符进行处理 本例暂时用不上
// 返回的仍然是message字符串
var exp = parseFilters(match[1].trim());
// _s(message)
tokens.push(("_s(" + exp + ")"));
lastIndex = index + match[0].length;
}
if (lastIndex < text.length) {
// push}}后面的文本
tokens.push(JSON.stringify(text.slice(lastIndex)));
}
return tokens.join('+')
}
实际上text可分为3个部分，{{之前的，{{}}中间包裹的，}}之后的，函数分别将三者抽离出来，push进了tokens，最后用+连接并返回一个字符串：
返回后，将此字符串作为值，和其余属性一个添加到children数组中：
处理完后，进入下一轮while循环。
剩余的字符串为</div>，所以进入第一个循环，并且匹配到EndTag的分支。
// Line-7672
function parseHTML(html, options) {
/* code */
while (html) {
/* code */
var textEnd = html.indexOf('<');
if (textEnd === 0) {
/* code */
var endTagMatch = html.match(endTag);
if (endTagMatch) {
var curIndex = index;
advance(endTagMatch[0].length);
parseEndTag(endTagMatch[1], curIndex, index);
continue
}
/* code */
}
/* code */
}
/* code */
}
进入endTag分支后，匹配到的endTagMatch如图所示：
将当前索引保存为curIndex，然后根据匹配到的字符串往前推index，调用parseEndTag函数进行处理。
// Line-7863
function parseEndTag(tagName, start, end) {
// 参数修正
var pos, lowerCasedTagName;
if (start == null) {
start = index;
}
if (end == null) {
end = index;
}
if (tagName) {
lowerCasedTagName = tagName.toLowerCase();
} // 获取最近的匹配标签
if (tagName) {
for (pos = stack.length - 1; pos >= 0; pos--) {
if (stack[pos].lowerCasedTag === lowerCasedTagName) {
break
}
}
} else {
// If no tag name is provided, clean shop
pos = 0;
} if (pos >= 0) {
for (var i = stack.length - 1; i >= pos; i--) {
// 提示没有匹配的标签
if ("development" !== 'production' &&
(i > pos || !tagName) &&
options.warn) {
options.warn(
("tag <" + (stack[i].tag) + "> has no matching end tag.")
);
}
// 调用剩下的一个参数函数
if (options.end) {
options.end(stack[i].tag, start, end);
}
} // Remove the open elements from the stack
stack.length = pos;
//
lastTag = pos && stack[pos - 1].tag;
} else if (lowerCasedTagName === 'br') {
if (options.start) {
options.start(tagName, [], true, start, end);
}
} else if (lowerCasedTagName === 'p') {
if (options.start) {
options.start(tagName, [], false, start, end);
}
if (options.end) {
options.end(tagName, start, end);
}
}
} // Line-8154
function end() {
// 获取对象与文本
var element = stack[stack.length - 1];
var lastNode = element.children[element.children.length - 1];
// type是2 跳过
if (lastNode && lastNode.type === 3 && lastNode.text === ' ' && !inPre) {
element.children.pop();
}
// pop stack
stack.length -= 1;
// 变成undefined了
currentParent = stack[stack.length - 1];
endPre(element);
} // Line-8010
function endPre(element) {
if (element.pre) {
inVPre = false;
}
// tag === pre?
if (platformIsPreTag(element.tag)) {
inPre = false;
}
}
这个函数对闭合标签进行配对，并对应将stack数组进行变动，由于本例只有一个div，所以stack被清空。
完事后，continue进入下一轮循环，由于字符串全部被切割完，此时html为空字符串，此时while循环结束，进入下一个代码段：
// Line-7672
function parseHTML(html, options) {
/* code */
while (html) {
/* code */
} // Clean up any remaining tags
parseEndTag(); /* 一些方法 */
}
字符串解析完后，再次调用parseEndTag进行收尾工作，函数内部将pos置0，stack置空。
回到了parse函数，并返回了root，即解析后的AST对象：
，包含了标签类型、属性、文本内容等。
先结束了吧。
最新文章
- PLSQL Developer图形化窗口创建数据库全过程
- Python全栈开发day5
- 把文件打成zip或然rar下载 （详询请加qq：2085920154）
- DataTables使用学习记录
- 2010noip提高组解题报告
- bzoj 1588: [HNOI2002]营业额统计 treap
- oracle多表查询
- swiper去除滑动设置
- java合并list
- 密码 hdu
- 1.javaOOP_Part1_抽象和封装
- windows部署MongoDB
- 电子产品使用感受之——为什么我把Apple Watch S2 升级到了 S4？
- Android 面试100问- 0序0
- centos6.5 python命令行模式左右建无法使用
- itsdangerous
- python编码（六）
- 2018 南京icpc现场赛总结
- 浅谈 vue实例 和 vue组件
- 【十月のA Letter to 后辈菌】