3天学写MVVM框架[二]：模板解析

2023-09-30 16:53:32

经过前一篇文章的铺垫，我们已经了解了MVVM框架的基本原理和编写方式，也写了一个简单的例子。本篇我们来实现一个更加复杂的例子——一个简单的列表页，包含列表、新增和编辑功能。

在开始之前，我们需要先对MVVM框架进行一些扩展，以支持模板解析。

模板解析

模板解析，简单来说就是把一个字符串形式的模板解析成一个数据结构，这个数据结构可以被框架用来创建视图。

这里我们采用最简单的实现方式：

function parseTemplate(template) {
  // 将模板字符串按行分割
  const lines = template.split('\n');

  // 创建AST树
  const astTree = [];

  for (let line of lines) {
    // 如果是空行，则跳过
    if (!line.trim()) continue;

    // 如果是注释行，则跳过
    if (line.startsWith('<!--')) continue;

    // 如果是指令，则解析指令
    if (line.startsWith('<!--@')) {
      const指令 = line.slice(4, -3);
      astTree.push({
        type: '指令',
        指令:指令,
      });
    } else {
      // 否则，则为普通文本
      astTree.push({
        type: '文本',
        文本: line,
      });
    }
  }

  返回astTree;
}

以上代码中，我们首先将模板字符串按行分割，然后遍历每一行。如果当前行是空行或注释行，则跳过。如果是指令，则解析指令。否则，则为普通文本。

我们把解析的结果称为AST树（抽象语法树），它是一个包含指令和文本节点的数据结构。

示例

让我们使用模板解析器来解析一个简单的列表模板：

<ul>
  <#for item in items#>
    <li><#= item #></li>
  <#/#for#>
</ul>

解析后的AST树为：

[
  {
    type: '文本',
    文本: '<ul>'
  },
  {
    type: '指令',
    指令: 'for item in items'
  },
  {
    type: '文本',
    文本: '<li><#= item #></li>'
  },
  {
    type: '指令',
    指令: '/for'
  },
  {
    type: '文本',
    文本: '</ul>'
  },
]