模板引擎mustache学习之html字符串变成tokens(四)

现在的文件目录如下:

index.js 注: 这里把Scanner类调整到parseTemplateToTokens.js中 因为是它要用

import parseTemplateToTokens from "./parseTemplateToTokens";
window.Mustache = {
  render(tempStr, data) {
    const tokens = parseTemplateToTokens(tempStr);
  },
};

parseTemplateToTokens.js

/**
 * 作用： 把html字符串转成tokens
 * 示例如: 注这里把 \n空格之类的字符不显示！
 *  <div>
 *    {{#arr}}
 *      <p>{{.}}</p>
 *    {{/arr}}
 *   </div>
    变成 
    [
      ["text": "<div>""],
      ["#","arr"],
      ["text": "<p>"],
      ["name": "."],
      ["text": "<p>"],
      ["/","arr"],
      ["text","</div>"]
    ]
 * */
import Scanner from "./Scanner";
import nestTokens from "./nestTokens";

export default function (tempStr) {
  const scanner = new Scanner(tempStr); // 实例化Scanner类

  const tokens = [];
  let words = "";

  while (!scanner.eos()) {
    words = scanner.scannUtil("{{");
    if (words) tokens.push(["text", words]);

    // 跳过指定位置
    scanner.scann("{{");

    // 把{{处理好了 但是我们好像还没有处理如果是}}对不对？那么这就很简单了!
    words = scanner.scannUtil("}}");
    if (words) {
      // 需要判断{{ 与 }} 之间是#xx 还是.的可能
      if (words[0] === "#") {
        // 从下标为1的项开始存，因为下标为0的项是#
        tokens.push(["#", words.substring(1)]);
      } else if (words[0] === "/") {
        // 从下标为1的项开始存，因为下标为0的项是/
        tokens.push(["/", words.substring(1)]);
      } else {
        tokens.push(["name", words]);
      }
    }
    // 跳过指定位置
    scanner.scann("}}");
  }

  return nestTokens(tokens);
}

index.html 只对templateStr做了一下小的调整为了效果看出来更明显

let templateStr = `
    <div>
       {{#arr}}
           <p>{{.}}</p>
       {{/arr}}
     </div>
`;

浏览器控制台输出如下: