Vue源码解析之Template转化为AST的实现方法

 function parse(template) {
 var currentParent; //当前父节点
 var root; //最终返回出去的AST树根节点
 var stack = [];
 parseHTML(template, {
 start: function start(tag, attrs, unary) {
 ......
 },
 end: function end() {
 ......
 },
 chars: function chars(text) {
 ......
 }
 })
 return root
 }

function parseHTML(html, options) {
 var stack = []; //这里和上面的parse函数一样用到stack这个数组 不过这里的stack只是为了简单存放标签名 为了和结束标签进行匹配的作用
 var isUnaryTag$$1 = isUnaryTag; //判断是否为自闭合标签
 var index = 0;
 var last;
 while (html) {
 //　　第一次进入while循环时，由于字符串以<开头，所以进入startTag条件，并进行AST转换，最后将对象弹入stack数组中
 last = html;
 var textEnd = html.indexOf('<');
 if (textEnd === 0) { // 此时字符串是不是以<开头
 // End tag:
 var endTagMatch = html.match(endTag);
 if (endTagMatch) {
 var curIndex = index;
 advance(endTagMatch[0].length);
 parseEndTag(endTagMatch[1], curIndex, index);
 continue
 }

 // Start tag: // 匹配起始标签
 var startTagMatch = parseStartTag(); //处理后得到match
 if (startTagMatch) {
 handleStartTag(startTagMatch);
 continue
 }
 }

 // 初始化为undefined 这样安全且字符数少一点
 var text = (void 0), rest = (void 0), next = (void 0);
 if (textEnd >= 0) { // 截取<字符索引 => </div> 这里截取到闭合的<
 rest = html.slice(textEnd); //截取闭合标签
 // 处理文本中的<字符
 // 获取中间的字符串 => {{message}}
 text = html.substring(0, textEnd); //截取到闭合标签前面部分
 advance(textEnd); //切除闭合标签前面部分

 }
 // 当字符串没有<时
 if (textEnd < 0) {
 text = html;
 html = '';
 }
 // // 处理文本
 if (options.chars && text) {
 options.chars(text);
 }
 }
 }

function parseStartTag() { //返回匹配对象
 var start = html.match(startTagOpen); // 正则匹配
 if (start) {
 var match = {
 tagName: start[1], // 标签名(div)
 attrs: [], // 属性
 start: index // 游标索引(初始为0)
 };
 advance(start[0].length);
 var end, attr;
 while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) { 
 advance(attr[0].length); 
 match.attrs.push(attr);
 }
 if (end) {
 advance(end[0].length); // 标记结束位置
 match.end = index; //这里的index 是在 parseHTML就定义 在advance里面相加
 return match // 返回匹配对象 起始位置 结束位置 tagName attrs
 }
 }
}

var startTagMatch = parseStartTag(); //处理后得到match
if (startTagMatch) {
 handleStartTag(startTagMatch);
 continue
}

 function handleStartTag(match) {
 var tagName = match.tagName;
 var unary = isUnaryTag$$1(tagName) //判断是否为闭合标签 
 var l = match.attrs.length;
 var attrs = new Array(l);
 for (var i = 0; i < l; i++) {
 var args = match.attrs[i];
 var value = args[3] || args[4] || args[5] || '';
 attrs[i] = {
 name: args[1],
 value: value
 };
 }
 if (!unary) {
 stack.push({tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs});
 lastTag = tagName;
 }
 if (options.start) {
 options.start(tagName, attrs, unary, match.start, match.end);
 }
 }

start: function start(tag, attrs, unary) {
 var element = {
 type: 1,
 tag: tag,
 attrsList: attrs,
 attrsMap: makeAttrsMap(attrs),
 parent: currentParent,
 children: []
 };
 processAttrs(element);
 if (!root) {
 root = element;
 } 
 if(currentParent){
 currentParent.children.push(element);
 element.parent = currentParent;
 }
 if (!unary) {
 currentParent = element;
 stack.push(element);
 }
}

// 初始化为undefined 这样安全且字符数少一点
var text = (void 0), rest = (void 0), next = (void 0);
if (textEnd >= 0) { // 截取<字符索引 => </div> 这里截取到闭合的<
 rest = html.slice(textEnd); //截取闭合标签
 // 处理文本中的<字符
 // 获取中间的字符串 => {{message}}
 text = html.substring(0, textEnd); //截取到闭合标签前面部分
 advance(textEnd); //切除闭合标签前面部分
}
// 当字符串没有<时
if (textEnd < 0) {
 text = html;
 html = '';
}
// 另外一个函数
if (options.chars && text) {
 options.chars(text);
}

chars: function chars(text) {
 if (!currentParent) { //如果没有父元素 只是文本
 return
 }

 var children = currentParent.children; //取出children
 // text => {{message}}
 if (text) {
 var expression;
 if (text !== ' ' && (expression = parseText(text))) {
 // 将解析后的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
 });
 }
 }
}
})

 var endTagMatch = html.match(endTag);
 if (endTagMatch) {
 var curIndex = index;
 advance(endTagMatch[0].length);
 parseEndTag(endTagMatch[1], curIndex, index);
 continue
 }

 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;
}

 end: function end() {
 // pop stack
 stack.length -= 1;
 currentParent = stack[stack.length - 1];
},