1： 栈数据结构:

1: 栈 (stack) 又名堆栈, 它是一种运算受限的线性表， 仅在表尾进行插入和删除操作, 
这一端叫做栈顶, 另一端叫做栈底。

2: 向栈中插入新元素叫做进栈,  入栈, 或者压栈； 从栈中删除一个元素又叫做出栈或者退栈。

3: 后进先出的特点: 栈中元素, 最先进展的必定最后出栈， 后进栈的一定会出栈。栈结构特点: 就是先进后出的特点。
所有的插入元素, 删除操作只可以在一端进行。 这一端就是栈顶。

4：javascript 中, 栈可可以使用数组模拟, 只需要限制使用push() 和 pop(), 不能使用
unshift() 和 shift() 方法; 

利用 "栈" 
遍历每一个字符:

1： 遍历这个字符的数字, 那么就把数字压栈,  把字符串压栈
2； 如果在这个字符是字母, 那么此时就是把栈顶这项改为字母。
3:  如果这个字母是 ] 就是将数字弹栈, 就是把字符串栈的栈顶的元素重复刚刚的这个次数, 然后弹栈, 拼接到新的栈顶上。

 

vue-loader 底层是以字符串的视角解析html 模板的。

var tempalteString = `
   <div>
     <h3></h3>
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
   </div>
`;

const AST = parse(templateString);

// 定义parse 函数:
export default function (templateString) {
  return templateString;
  // 指针
  var index = 0;
  // 剩余部分
  var rest = '',
  // 开始标记
  var startRegExp = /^\<([a-z]+[1-6]?)\>/;
  // 结束标记
  var endRegExp = /^\<\/([a-z]+[1-6]?)\>/;

  while(index < templateString - 1) {
    test = templateString.substring(index);
    // 识别遍历到这个字符, 是不是开始标签
    if(startRegExp.test(test)) {
      let tag = templateString.match(startRegExp)[1];
      console.log('检测到开始标记'， tag);
      // 指针移动标签的长度加2, 为什么要加上2呢？ 因为<> 需要占两位。
      index += tag.length + 2;
    }else if(endRegExp.test(test)){
      // 识别遍历到这个字符, 是不是一个结束标签
      let tag = rest.match(endRegExp, tag);
      // 指针移动标签的长度加3, 为什么要加上2呢？ 因为</> 也占3 位
      index += tag.length + 3;
    }else {
      // 标签内容
      index ++;
    }
  }
}

还有一种自封闭标签是比较麻烦的。
AST 抽象语法树的算法就是用到的是指针思想,  加上栈的算法。

vue  会字符串的视角审视所有的书写的html 结构。

在 vue底层中会把所有的htm 模板中的数据全部遍历一遍。
用js 对象模拟抽象语法树

{
  tag: "div",   // 标签
  attrs: [{name: "class", value: "title"}],  // 书香
  type: 1,
  children: [
    {
      tag: "h3",
      attrs: [{name: "class", value: "title"}]
      type: 1,
      children: [{text: "我是一个标题", type: 3}]
    },
    {
      tag: "ul",
      attrs: [],
      type: 1,
      children: [
        {
          tag: "li",
          for: "arr",
          key: "index",
          alis: "item",
          type: 1,
          children: []
        }
      ] 
    }
  ]
}

编译原理： 都需要使用ast 抽象语法树。

抽象语法树与虚拟节点的关系:
抽象语法树并不需要进行虚拟节点的比较。  但是虚拟节点需要进行diff 算法的比较才可以生成ui界面。

抽象语法树需要生成渲染函数,  再到虚拟节点
vue 中模板语法 ==> AST 语法树 ==> 然后渲染函数(h 函数) ==>VDOM  ===> 在ui 界面