简单易学的 JavaScript 模板引擎

引言

JavaScript 模板引擎是一个强大的工具，可以帮助我们高效地构建动态 web 页面。它允许我们使用模板来定义页面的结构，然后将数据插入模板以生成最终页面。在本文中，我们将创建一个简单的 JavaScript 模板引擎，帮助我们了解其工作原理并掌握其基本功能。

建立一个基础

为了创建模板引擎，我们需要创建一个函数来解析模板并替换占位符。占位符是模板中用于插入数据的特殊符号。最常用的占位符是 ${}。

function renderTemplate(template, data) {
  let output = template;

  for (const key in data) {
    const regex = new RegExp(`\\${{ ${key} }}`, 'g');
    output = output.replace(regex, data[key]);
  }

  return output;
}

这个函数接受一个模板和一个包含要插入的数据的对象。它遍历 data 对象中的键，并使用正则表达式将模板中的相应占位符替换为数据值。

增强功能

现在，让我们为我们的模板引擎添加一些额外的功能，使其更实用。

处理嵌套对象：

function renderTemplate(template, data) {
  // ...
  const regex = new RegExp(`\\${{ ${key}(\\..+?)? }}`, 'g');
  // ...
}

通过修改正则表达式，我们可以支持嵌套对象。

条件渲染：

function renderTemplate(template, data) {
  // ...
  const regex = new RegExp(`\\${{ if ${condition} }}`, 'g');
  // ...
}

通过添加对条件渲染的支持，我们可以根据条件显示或隐藏模板部分。

循环：

function renderTemplate(template, data) {
  // ...
  const regex = new RegExp(`\\${{ for ${item} in ${array} }}`, 'g');
  // ...
}

使用循环，我们可以迭代数组或对象并生成重复的内容。

使用示例

有了这些功能，我们就可以使用我们的模板引擎来生成动态页面。以下是一个示例模板：

<div>
  <h1>Hello, {{name}}!</h1>
  <p>Your age is {{age}}.</p>
  {{#if isMale}}
  <p>You are male.</p>
  {{/if}}
</div>

然后，我们可以使用以下数据对象来渲染模板：

const data = {
  name: 'John Doe',
  age: 30,
  isMale: true
};

调用我们的模板引擎后，我们得到以下输出：

<div>
  <h1>Hello, John Doe!</h1>
  <p>Your age is 30.</p>
  <p>You are male.</p>
</div>

SEO 优化：