Vue深入学习1—mustache模板引擎原理

mustache 是 “胡子”的意思，因为它的嵌入标记 {{ }} 旋转过来很像胡子，Vue中的 {{ }} 语法也引用了mustache，这也是我深入学习的目的。

1、原始js方式使 数据 变为视图

2、mustache的底层原理

要实现这样的：

实现方式：Mustache.render(templateStr, data); templateStr模板字符串，data数据，render返回填充后dom字符串。

实现原理：第①步：将模板字符串编译成tokens 形式，第②步：将tokens与数据结合，解析成dom字符串。

3、什么是tokens?

JS的嵌套数组，模板字符串的JS表示形式。

模板字符串：

我买了一辆{{thing}},{{money}}W

会被解析成下面的 tokens:

// tokens: 
[
    ["text",  "< h1 >我买了一辆"],
    ["name",  ”thing“],
    ["text",  ","],
    ["name",  ”money“],
    ["text",  "W< /h1 >"],
]

实现tokens思路：用到了《数据结构》中栈的原理，遇到 # 号进栈，遇到 / 线出栈； # 号标记的tokens，需要递归处理它的下标为2的小数组。遍历传入的 tokens 的每一个 token，遇到第一项是 # 和 / 的分别做处理，其余的做一个默认处理。大致思路是当遍历到的 token 的第一项为 # 时，就把直至遇到配套的 / 之前，遍历到的每一个 token 都放入一个容器（collector）中，把这个容器放入当前 token 里作为第 3 项元素。

// nestTokens.js
export default (tokens) => {
  const nestTokens = []
  const stack = []
  let collector = nestTokens // 一开始让收集器 collector 指向最终返回的数组 nestTokens
  tokens.forEach(token => {
    switch (token[0]) {
      case '#':
        stack.push(token)
        collector.push(token)
        collector = token[2] = [] // 连等赋值
        break
      case '/':
        stack.pop(token)
        collector = stack.length > 0 ? stack[stack.length-1][2] : nestTokens
        break;
      default:
        collector.push(token)
        break
    }
  })
  return nestTokens
}

参考：https://juejin.cn/post/6954244558938963982