最近在看 Vue 的源码,主要是看某个源码解析网站和深入浅出 Vue.js 这本书。然后尝试自己实现,但是有时候遇到了问题真心蛋疼。想找个人讨论又找不到。所以想在这里问一下有没有人一起学习的,可以互相讨论。
我目前把变化侦测、虚拟 DOM 学习完了。在看模板编译原理的解析器部分。
在 HTML 解析器-截取文本那一章里有两个疑惑:
let textEnd = html.indexOf('<');
// ...
let text, rest, next
if (textEnd >= 0) {
rest = html.slice(textEnd)
while (
!endTag.test(rest) &&
!startTagOpen.test(rest) &&
!comment.test(rest) &&
!conditionalComment.test(rest)
) {
// < in plain text, be forgiving and treat it as text
next = rest.indexOf('<', 1)
// 疑惑 1:如果如疑惑 2 注释所说,整个模板都是文本,那么如果文本是
// 1111<2222 这种情况的话,那么 text 最终只能获取到 1111,获取不到<2222 。
// 并且 html 此时截取为<2222,在下一次循环的时候 textEnd 首先等于 0,然后会在 next
// 那里 break 掉。这样 text 为"",html 也不变,就这样会无限循环下去。
// 如果不是纯文本的话(有结束标签),永远是在 while 条件里结束循环
// 似乎这句话永远不会执行,那不就没用了吗。
if (next < 0) break
textEnd += next
rest = html.slice(textEnd)
}
text = html.substring(0, textEnd)
}
// 如果模板中找不到<,就说明整个模板都是文本(书中注释)
// 疑惑 2:Vue 要求模板中必须要有根元素,怎么会出现模板都是文本的情况呢?
if (textEnd < 0) {
text = html
}
if (text) {
advance(text.length)
}
function advance (n) {
index += n
html = html.substring(n)
}
}
1
ryougifujino OP 最近有在看源码的也可以加我讨论:MTQyMTk5ODQ0OQ==( QQ )
|
2
anson2017 2020-07-23 09:38:39 +08:00
@ryougifujino 最近刚好也在看 Vue3 的源码,可以交流
|
3
sadfQED2 2020-07-23 12:40:52 +08:00 via Android
去 bat 面试前端,然后就能和面试官讨论源码了🐶🐶
|