作者：Alex Ronin翻译：疯狂的技术宅
原文：https://frontnet.eu/node-js-v...
未经允许严禁转载
Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是，视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外，它还可以从服务器端导入数据并渲染最终的 HTML。Node.js 项目中一些常见的视图引擎如下：
什么是 Nod.js 视图引擎？
- EJS
- Pug (Formerly Jade)
- Handlebars
- Haml.js
- Nunjucks
- …
今天我将尝试上面的一些模板，看看哪一个更容易使用。开始吧！
EJS
首先要为本文创建一个演示程序，我们需要用 ExpressJS 创建一个项目。用express-generator 可以快速创建这个项目。
sudo npm install express-generator -g
express --view=ejs Demo_EJS运行以上命令用 Node.js ejs 视图引擎创建项目时，我们的项目具有以下目录结构：
通过上面的命令，我们用 EJS 视图引擎创建了一个 Express 项目。此视图引擎在 app.js 文件中设置如下：
//...
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//...接下来说明如何使用，我将创建网站的基本布局，并从服务器渲染数据。首先，从服务器渲染数据。
编辑 routes/index.js 文件：
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
let list = [
{name: 'PHP'},
{name: 'Ruby'},
{name: 'Java'},
{name: 'Python'},
{name: 'dotNet'},
{name: 'C#'},
{name: 'Swift'},
{name: 'Pascal'},
]
res.render('index', {title: 'Demo Ejs', list: list});
});
module.exports = router;index.ejs 文件内容：
<%= title %>
This is header
<%= title %>
List of programming languages
<% list.forEach(function(item) {%>
- <%= item.name %>
<%}); %>
我们已经实现了在服务器对视图进行渲染。另外我们还可以通过添加 header.ejs 文件来分割页眉、页脚，然后包含如下脚注：
<%= title %>
<% include header %>
<%= title %>
List of programming languages
<% list.forEach(function(item) {%>
- <%= item.name %>
<%}); %>
Pug
Pug - 以前名为 Jade，也是一个受欢迎的 Node.js 视图引擎项目。要使用它，请按如下方式设置视图引擎：
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');通过上面的例子，我们使用以下内容创建了 pug 文件：
//file layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
include header
block content
include footer
//file index.pug
extends layout
block content
h1= title
| List of programming languages
ul
each item in list
li= item.name我们可以看到在相同的内容中，Pug 的代码是如此清晰、简洁和易于理解。 Pug 的工作方式与 Python 语言大致相同，即使用缩进或空格。
Hbs (Handlebars.js)
要使用此模板，需要把引擎视图设置为 hbs。同时必须注册 blocks（在 handlebarjs 中称为 partial），如下所示：
var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');针对上述问题，我们还将创建具有以下内容的 hbs 文件：
// file layout.hbs
{{title}}
{{> header}}
{{{body}}}
{{> footer}}
// file /views/partials/header.hbs
This is header
//file /views/partials/footer.hbs
This is footer
//file index.hbs
{{title}}
List of programming languages
{{#each list}}
- {{name}}
{{/each }}
结论
我在 Nodejs 项目中测试了一些流行的视图引擎。在你的开发工作中可以选择 Pug，因为它非常简单易懂。
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
- WebSocket实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K，该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
- 更多文章...