怎么在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) {   // 截取<字符索引 => 

函數進入while循環對html進行獲取<標簽索引 var textEnd = html.indexOf('<');如果textEnd === 0 說明當前是標簽或者 再用正則匹配是否當前是結束標簽。var endTagMatch = html.match(endTag); 匹配不到那么就是開始標簽，調用parseStartTag()函數解析。

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

該函數主要是為了構建一個match對象，對象里面包含tagName(標簽名)，attrs(標簽的屬性)，start(<左開始標簽在template中的位置)，end(>右開始標簽在template中的位置) 如template =

接著把match返回出去 作為調用handleStartTag的參數

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

接下來看handleStartTag這個函數：

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

函數中分為3部分 第一部分是for循環是對attrs進行轉化，我們從上一步的parseStartTag()得到的match對象中的attrs屬性如圖

當時attrs是上面圖這樣子滴 我們通過這個循環把它轉化為只帶name 和 value這2個屬性的對象 如圖:

接著判斷如果不是自閉合標簽，把標簽名和屬性推入棧中（注意 這里的stack這個變量在parseHTML中定義，作用是為了存放標簽名 為了和結束標簽進行匹配的作用。）接著調用最后一步 options.start 這里的options就是我們在parse函數中 調用parseHTML是傳進來第二個參數的那個對象(包含start end chars 3個方法函數) 這里開始看options.start這個函數的作用：

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

這個函數中 生成element對象 再連接元素的parent 和 children節點 最終push到棧中

此時棧中第一個元素生成 如圖：

完成了while循環的第一次執行，進入第二次循環執行，這個時候html變成{{message}}