vue源码的模板编译

const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`; //标签名
const qnameCaptrue = `((?:${ncname}\\:)?${ncname})`; //用来获取标签名 match后的索引为1的  <aa:xxx></aa:xxx>
const startTagOpen = new RegExp(`^<${qnameCapture}`); // 匹配开始标签
const endTag = new RegExp(`^\\/${qnameCaptrue}[^>]*>`); // 匹配闭合标签
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+)+|'([^']*)'+|([^\s"'=<>`]+)))?/;
// 匹配属性  a=b  a="b"   a='b'

const startTagClose = /^\s*(\/?)>/; //   />
const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; //{{aaa}}

// 分组  ()
// 可有可无 ？

let r = "<xxxxx>".match(new RegExp(qnameCaptrue));
console.log(r);

function start(tagName, attributes) {
  console.log("start", tagName, attributes);
}
function end(tagName) {
  console.log("end", tagName);
}

function chars(text) {
  console.log("charts", text);
}

function parserHTML() {
  function advance(len) {
    html = html.substring(len);
  }
  function parserStartTag(html) {
    const start = html.match(startTagOpen);
    if (start) {
      const match = {
        tagName: start[1],
        attrs: [],
      };
      advance(start[0].length);
      let end;
      let attr;
      console.log(html);
      // 如果没有遇到标签结尾，就不停的解析
      while (
        !(end == html.match(startTagClose)) &&
        attr == html.match(attribute)
      ) {
        console.log(attr);
        match.attrs.push({
          name: attr[1],
          value: attr[3] || attr[4] || attr[5],
        });
        advance(attr[0].length);
      }
      if (end) {
        advance(end[0].length);
      }
      return match;
    }
    return false;
  }

  while (html) {
    //看要解析的内容是否存在，如果存在就不停的解析
    let textEnd = html.indexOf("<"); //当前解析的开头
    if (textEnd == 0) {
      const startTagMatch = parserStartTag();
      if (startTagMatch) {
        start(startTagMatch.tagName, startTagMatch.attrs);
        continue;
      }
      const endTagMatch = html.match(endTag);
      if (endTagMatch) {
        end(endTagMatch[1]);
        advance(endTagMatch[0].length);
        continue;
      }
    }

    let text;
    if (textEnd >= 0) {
      html = html.substring(0, textEnd);
    }
    if (text) {
      chars(text);
      advance(text.length);
    }
  }
}

export function compileToFunction(template) {
  parserHTML(template);
}