模板引擎mustache学习之tokens变成嵌套数组(五)

现在的文件目录如下:

nestTokens.js

/**
 * 作用: 将tokens 折叠成 多维数据
 *
 */

export default function (tokens) {
  let nestTokens = [];
  let sections = [];
  let collector = nestTokens; // 引用数组关系

  for (let i = 0, len = tokens.length; i < len; i++) {
    let token = tokens[i];

    // 检查每项中的第一个元素
    switch (token[0]) {
      case "#":
        collector.push(token);
        sections.push(token);
        collector = token[2] = []; // 这里是形成嵌套数组的开始
        break;
      case "/":
        sections.pop(); // 删除最后一项
        collector =
          sections.length > 0 ? sections[sections.length - 1][2] : nestTokens;
        break;
      default:
        // 如果上面二种情况都都不是那么直接往collector中添加 因为它与nestTokens是存在引用关系所以nestTokens也一样会添加
        collector.push(token);
    }
  }

  return nestTokens;
}

index.html

let templateStr = `
        <ul>
          {{#arr}}
          <li>
            <div>学生{{name}}的爱好</div>
              {{#hobbies}}
                <ol>{{.}}</ol>
                {{#list}}
                  <p>{{.}}</p>
                {{/list}}
              {{/hobbies}}
          </li>
          {{/arr}}
        </ul>
      `;

最终效果展示:

总结: 把一维数组变成多维数组 根据指定开始标识 与 结束标识！ 再通过数组引用关系完成更深层次的嵌套! 可以展开自己看一下哦！