class Scanner {
  constructor(tplt) {
    this.tplt  = tplt;
    // 指针
    this.pos = 0;
    // 尾巴  剩余字符
    this.tail = tplt;
  }

  /**
   * 路过指定内容
   *
   * @memberof Scanner
   */
  scan(tag) {
    if (this.tail.indexOf(tag) === 0) {
      // 直接跳过指定内容的长度
      this.pos += tag.length;
      // 更新tail
      this.tail = this.tplt.substring(this.pos);
    }
  }

  /**
   * 让指针进行扫描，直到遇见指定内容，返回路过的文字
   *
   * @memberof Scanner
   * @return str 收集到的字符串
   */
  scanUntil(stopTag) {
    // 记录开始扫描时的初始值
    const startPos = this.pos;
    // 当尾巴的开头不是stopTg的时候，说明还没有扫描到stopTag
    while (!this.eos() && this.tail.indexOf(stopTag) !== 0 ) {
      // 改变尾巴为当前指针这个字符到最后的所有字符
      this.tail = this.tplt.substring(++this.pos);
    }
    // 返回经过的文本数据
    return this.tplt.substring(startPos, this.pos).trim();
  }

  /**
   * 判断指针是否到达文本末尾（end of string）
   *
   * @memberof Scanner
   */
  eos() {
    return this.pos >= this.tplt.length;
  }
}

扫描到了相关内容，我们就可以将数据收集起来，并转换为不含嵌套结构的token，于是定义一个collectTokens函数:

function collectTokens(scanner) {
  const tokens = [];
  let word = '';
  // 当scanner没有到头的就持续将获取的token加入数组中
  while (!scanner.eos()) {
    // 收集文本
    word = scanner.scanUntil('{{');
    word && tokens.push(['text', word]);
    scanner.scan('{{');

    // 收集变量
    word = scanner.scanUntil('}}');

    // 对不同类型结构进行分类标识
    switch (word[0]) {
      case '#':
        tokens.push(['#', word.substring(1)]);
        break;
      case '/':
        tokens.push(['/', word.substring(1)]);
        break;
      default:
        word && tokens.push(['name', word]);
    }

    scanner.scan('}}');
  }

  return tokens;
}

[
    ["text", "<div>?      <ol>"],
    ["#", "students"],
    ["text", "<li>?            学生"],
    ["name", "name"],
    ["text", "的爱好是?            <ol>"],
    ["#", "hobbies"],
    ["text", "<li>"],
    ["name", "."],
    ["text", "</li>"],
    ["/", "hobbies"],
    ["text", "</ol>?          </li>"],
    ["/", "students"],
    ["text", "</ol>?    </div>"]
]

["#", "students"],
["#", "hobbies"],
["/", "hobbies"],
["/", "students"],

function nestTokens(tokens) {
  const nestedTokens = [];
  const stack = [];
  // 收集器默认为最外层
  let collector = nestedTokens;

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

    switch (token[0]) {
      case '#':
        // 收集当前token
        collector.push(token);
        // 压入栈中
        stack.push(token);
        // 由于进入了新的嵌套结构，新建一个数组保存嵌套结构
        // 并修改collector的指向
        collector = token[2] = [];
        break;
      case '/':
        // 出栈
        stack.pop();
        // 将收集器指向上一层作用域中用于存放嵌套结构的数组
        collector = stack.length > 0 
                    ? stack[stack.length - 1][2] 
                    : nestedTokens;
        break;
      default:
        collector.push(token);
    }
  }

  return nestedTokens;
}

function tokenizer(tplt) {
  const scanner = new Scanner(tplt.trim());

  // 收集tokens，并将循环内容嵌套到tokens中，并返回
  return nestTokens(collectTokens(scanner));
}

tplt.replace(/{{\s*(\w+)\s*}}/g, function(match, $1) {
  return data[$1];
});

/**
 * 在对象obj中用连续的打点字符串寻找到对象值
 * 
 * @example lookup({a: {b: {c: 100}}}, 'a.b.c')
 *
 * @param {object} obj
 * @param {string} key
 * @return any
 */
function lookup(obj, key) {
  const keys = key.split('.');

  // 设置临时变量，一层一层查找
  let val = obj;
  for (const k of keys) {
    if(val === undefined) {
      console.warn(`Can't read ${k} of undefined`);
      return '';
    };
    val = val[k];
  }
  return val;
}

function tokens2dom(tokens, data) {

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

    // 按类型拼接字符串
    switch (token[0]) {
      case 'name':
        if (token[1] === '.') {
          html += data;
        } else {
          html += lookup(data, token[1]);
        }
        break;
      case '#':
        // 递归解决数组嵌套的情况
        for (const item of data[token[1]]) {
          html += tokens2dom(token[2], item);
        }
        break;
      default:
        html += token[1];
    }
  }

  return html;
}

// 暴露全局变量
window.TemplateEngine = {
  render(tplt, data) {
    // 转换为tokens
    const tokens = tokenizer(tplt);
    // 注入数据，让tokens转换为DOM字符串
    const html = tokens2dom(tokens, data);

    return html;
  }
}