最近在看 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)
}
}
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.