当Nunjucks遇到Node.js：浅记Nunjucks模板引擎

2024-01-16 21:38:21

Nunjucks是一款轻量级、功能强大的JavaScript模板引擎，广泛应用于Node.js和浏览器端开发。它语法简单、易于学习，且支持丰富的特性，如变量、过滤器、运算符、表达式、条件语句、循环语句、继承、布局和插件等。Nunjucks拥有活跃的社区和详尽的文档，并提供广泛的支持。

Nunjucks简介

Nunjucks由Mozilla开发，是一款纯JavaScript编写的模板引擎。它既可以用在Node.js环境下，又可以运行在浏览器端。但是，主要还是运行在Node.js环境下，因为浏览器端有更好的模板解决方案，例如MVVM框架。

以前的WEB项目大多会采用后台MVC模式，这样做的好处在于，前端和后端是完全分离的，各司其职，前端只负责页面展示和交互，后端负责数据的处理和业务逻辑。这种模式使得前端开发和后端开发可以并行进行，提高了开发效率。

但是，传统的MVC模式也存在一些缺点。例如，前端和后端需要频繁的交互，这可能会导致性能问题。此外，MVC模式使得前端开发和后端开发耦合度较高，不利于代码的维护和重用。

为了解决这些问题，Nunjucks应运而生。Nunjucks是一款模板引擎，它可以将数据和模板结合起来，生成最终的HTML页面。Nunjucks使用一种类似于JavaScript的语法，这使得前端开发人员可以很容易地学习和使用它。

Nunjucks的基本语法

Nunjucks的基本语法包括变量、过滤器、运算符、表达式、条件语句、循环语句、继承、布局和插件等。

变量

变量用于在模板中存储数据。变量的语法如下：

{{ variable }}

例如，以下代码在模板中定义了一个名为“name”的变量，并将其值设置为“John Doe”：

{% set name = "John Doe" %}

然后，就可以在模板中使用变量“name”了：

Hello, {{ name }}!

输出结果为：

Hello, John Doe!

过滤器

过滤器用于对变量的值进行格式化或处理。过滤器的语法如下：

{{ variable | filter }}

例如，以下代码使用“uppercase”过滤器将变量“name”的值转换为大写：

{{ name | uppercase }}

输出结果为：

JOHN DOE

Nunjucks提供了许多内置过滤器，还可以自定义过滤器。

运算符

运算符用于对变量的值进行运算。运算符的语法如下：

{{ expression }}

例如，以下代码使用“+”运算符将变量“a”和“b”的值相加：

{{ a + b }}

输出结果为：

Nunjucks支持多种运算符，包括算术运算符、比较运算符、逻辑运算符和赋值运算符。

表达式

表达式是运算符和变量的组合。表达式的语法如下：

{{ expression }}

例如，以下代码使用“if”表达式判断变量“a”是否大于变量“b”：

{% if a > b %}
  a is greater than b
{% else %}
  b is greater than or equal to a
{% endif %}

输出结果为：

a is greater than b

Nunjucks支持多种表达式，包括条件表达式、循环表达式和继承表达式。

条件语句

条件语句用于判断某个条件是否成立，并根据条件结果执行不同的代码。条件语句的语法如下：

{% if condition %}
  code to execute if condition is true
{% else %}
  code to execute if condition is false
{% endif %}

例如，以下代码使用“if”语句判断变量“a”是否大于变量“b”：

{% if a > b %}
  a is greater than b
{% else %}
  b is greater than or equal to a
{% endif %}

输出结果为：

a is greater than b

Nunjucks支持多种条件语句，包括“if”、“elseif”和“else”。

循环语句

循环语句用于遍历数组或对象中的元素。循环语句的语法如下：

{% for item in array %}
  code to execute for each item in array
{% endfor %}

例如，以下代码使用“for”语句遍历数组“numbers”：

{% for number in numbers %}
  {{ number }}
{% endfor %}

输出结果为：

1
2
3

Nunjucks支持多种循环语句，包括“for”、“foreach”和“while”。

继承

继承允许模板继承其他模板的结构和内容。继承的语法如下：

{% extends "parent.njk" %}

例如，以下代码使用“extends”语句继承模板“parent.njk”：

{% extends "parent.njk" %}

{% block content %}
  <h1>Hello, world!</h1>
{% endblock %}

模板“parent.njk”如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>

  <main>
    {% block content %}
    {% endblock %}
  </main>

  <footer>
    Copyright &copy; 2023 My Website
  </footer>
</body>
</html>

继承后的模板如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>

  <main>
    <h1>Hello, world!</h1>
  </main>

  <footer>
    Copyright &copy; 2023 My Website
  </footer>
</body>
</html>

布局

布局允许模板定义公共的结构和内容，然后其他模板可以继承这个布局。布局的语法如下：

{% extends "layout.njk" %}

例如，以下代码使用“extends”语句继承布局“layout.njk”：

{% extends "layout.njk" %}

{% block content %}
  <h1>Hello, world!</h1>
{% endblock %}

布局“layout.njk”如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>

  <main>
    {% block content %}
    {% endblock %}
  </main>

  <footer>
    Copyright &copy; 2023 My Website
  </footer>
</body>
</html>

继承后的模板如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>

  <main>
    <h1>Hello, world!</h1>
  </main>

  <footer>
    Copyright &copy; 2023 My Website
  </footer>
</body>
</html>