vue源码之mustache模板

const items = ["a", "b", "c"];
const data = { items };
const dom = mustache.render(
  document.getElementById("template").innerHTML,
  data
);
document.getElementById("app").innerHTML = dom;

// 扫描类
class Scanner {
  constructor(templateStr) {
    this.templateStr = templateStr;
    // 指针
    this.pos = 0;

    this.tail = "";
  }
  // 让指针走过指定的内容
  scan(str) {
    this.pos += str.length;
    this.tail = this.templateStr.substring(this.pos);
  }
  // 让指针走到指定标记的位置,并返回走过的字符串
  scanUtil(endFlag) {
    const index = this.pos;
    while (!this.eos() && !this.tail.startsWith(endFlag)) {
      this.pos++;
      this.tail = this.templateStr.substring(this.pos);
    }
    const result = this.templateStr.substring(index, this.pos);
    this.scan(endFlag);
    return result;
  }
  // 负责终点检查
  eos() {
    return this.pos >= this.templateStr.length;
  }
}

// 将模板字符窜转换为tokens数组
const parseTemplateToTokens = (templateString) => {
  const tokens = [];
  const sc = new Scanner(templateString);
  let words;
  while (!sc.eos()) {
    // 寻找开始标记之前的文字
    words = sc.scanUtil("{{");
    tokens.push(["text", words]);
    // 寻找开始标记与结束标记之间的文字
    words = sc.scanUtil("}}");
    if (words !== "") {
      //  解析嵌套情况
      if (words[0] === "#") {
        //嵌套开始标记
        tokens.push(["#", words.substring(1)]);
      } else if (words[0] === "/") {
        //嵌套结束标记
        tokens.push(["/", words.substring(1)]);
      } else {
        // 非嵌套
        tokens.push(["name", words]);
      }
    }
  }
  // 到这里tokens是打平的一维数组,我们需要将其折叠为多维数组来满足嵌套关系
  return nestTokens(tokens);
};

// 折叠嵌套的tokens
const nestTokens = (tokens) => {
  const nestedTokens = [];
  // 收集器,用来指向我们正在操作的元素的折叠项
  let collector = nestedTokens;
  // 维护一个栈的数据结构,保证栈顶永远是我们正在操作的元素
  const stack = [];
  for (let i = 0; i < tokens.length; i++) {
    const token = tokens[i];
    switch (token[0]) {
      case "#":
        collector.push(token);
        stack.push(token);
        // 给token添加第三项数组项,并让收集器指向它
        collector = token[2] = [];
        break;
      case "/":
        stack.pop();
        if (!stack.at(-1)) {
          collector = nestedTokens;
          break;
        }
        collector = stack.at(-1)[2];
        break;
      default:
        collector.push(token);
        break;
    }
  }
  return nestedTokens;
};

// tokens render 单层级
const tokensRender = (tokens, data) => {
  let result = "";
  tokens.forEach((t, i) => {
    const type = t[0];
    console.log(t);
    if (type === "text") {
      // 普通文本
      result += t[1];
    } else if (type === "name") {
      // key value
      const key = t[1];
      if (key === ".") {
        result += data;
      } else {
        // 解决连续键
        const paths = key.split(".");
        // 指针
        let point = data;
        paths.forEach((path) => {
          point = point[path];
        });

        result += point;
      }
    } else {
      const key = t[1];
      const nestTokens = t[2];
      const nestData = data[key];
      const str = parseArrayTokens(nestTokens, nestData);
      result += str;
    }
  });
  return result;
};

// 解析嵌套tokens
const parseArrayTokens = (toenks, array) => {
  let result = "";
  array.forEach((node) => {
    // 这里我们循环交替调用,形成一个递归效果
    result += tokensRender(toenks, node);
  });
  return result;
};

const pandaTemplate = {
  render(template, data) {
    const tokens = parseTemplateToTokens(template);
    const htmlStr = tokensRender(tokens, data);
    return htmlStr;
  },
};