function parseEndTag(tagName, start, end) { var pos, lowerCasedTagName; if (tagName) { lowerCasedTagName = tagName.toLowerCase(); } // Find the closest opened tag of the same type 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) { // Close all the open elements, up the stack for (var i = stack.length - 1; i >= pos; i--) { 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; }
这里首先找到栈中对应的开始标签的索引pos，再从该索引开始到栈顶的所以元素调用options.end这个函数
end: function end() { // pop stack stack.length -= 1; currentParent = stack[stack.length - 1]; },
把栈顶元素出栈，因为这个元素已经匹配到结束标签了，再把当前父元素更改。终于走完了，把html的内容循环完，最终return root 这个root就是我们所要得到的AST
这只是Vue的冰山一角，文中有什么不对的地方请大家帮忙指正，本人最近也一直在学习Vue的源码，希望能够拿出来与大家一起分享经验，接下来会继续更新后续的源码，如果觉得有帮忙请给个Star哈
github地址为:https://github.com/zwStar/vue-ast 欢迎各位star或issues