那些最受欢迎的 Node.js 视图引擎

作者：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 文件内容：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
      <h3>This is header</h3>
    </header>
    <main>
      <h1><%= title %></h1>
      List of programming languages
      <ul>
          <% list.forEach(function(item) {%>
        <li><%= item.name %></li>
          <%}); %>
      </ul>
    </main>
    <footer>
      <h3>This is footer</h3>
    </footer>
  </body>
</html>

我们已经实现了在服务器对视图进行渲染。另外我们还可以通过添加 header.ejs 文件来分割页眉、页脚，然后包含如下脚注：

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <header>
      <% include header %>
    </header>
    <main>
      <h1><%= title %></h1>
      List of programming languages
      <ul>
          <% list.forEach(function(item) {%>
        <li><%= item.name %></li>
          <%}); %>
      </ul>
    </main>
    <footer>
      <% include footer %>
    </footer>
  </body>
</html>

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
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    {{> header}}
    {{{body}}}
    {{> footer}}
  </body>
</html><code class="language-javascript">
 
// file /views/partials/header.hbs
<h3>This is header</h3>
 
 //file /views/partials/footer.hbs 
 <h3> This   is   footer </h3> 
 
 //file index.hbs 
 <h1> {{title}} </h1> 
 List of programming languages 
 <ul> 
   {{#each list}} 
     <li> {{name}} </li> 
   {{/each }} 
 </ul>

结论

我在 Nodejs 项目中测试了一些流行的视图引擎。在你的开发工作中可以选择 Pug，因为它非常简单易懂。

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

更多文章...

那些最受欢迎的 Node.js 视图引擎

什么是 Nod.js 视图引擎？

EJS

Pug

Hbs (Handlebars.js)

结论

本文首发微信公众号：前端先锋

欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

疯狂的技术宅

引用和评论

为什么浮点数运算会产生误差

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具