那些最受欢迎的 Node.js 视图引擎[每日前端夜话0xA7]

Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是，视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外，它还可以从服务器端导入数据并渲染最终的 HTML。Node.js 项目中一些常见的视图引擎如下：

什么是 Nod.js 视图引擎？

Node.js 视图引擎

•EJS

•Pug (Formerly Jade)

•Handlebars

•Haml.js

•Nunjucks

•…

今天我将尝试上面的一些模板，看看哪一个更容易使用。开始吧！

EJS

嵌入式JavaScript模板

首先要为本文创建一个演示程序，我们需要用 ExpressJS 创建一个项目。用express-generator 可以快速创建这个项目。

1sudo npm install express-generator -g2express --view=ejs Demo_EJS

运行以上命令用 Node.js ejs 视图引擎创建项目时，我们的项目具有以下目录结构：

Node.js 项目文件列表

通过上面的命令，我们用 EJS 视图引擎创建了一个 Express 项目。此视图引擎在 app.js 文件中设置如下：

1//...2//view engine setup3app.set('views', path.join(__dirname, 'views'));4app.set('view engine', 'ejs');56//...

接下来说明如何使用，我将创建网站的基本布局，并从服务器渲染数据。首先，从服务器渲染数据。

编辑 routes/index.js 文件：

1var express = require('express'); 2var router = express.Router(); 3 4/* GET home page. */ 5router.get('/', function(req, res, next) { 6 7  let list = [ 8      {name: 'PHP'}, 9      {name: 'Ruby'},10      {name: 'Java'},11      {name: 'Python'},12      {name: 'dotNet'},13      {name: 'C#'},14      {name: 'Swift'},15      {name: 'Pascal'},16  ]17  res.render('index', {title: 'Demo Ejs', list: list});18});1920module.exports = router;

index.ejs 文件内容：

 1<!DOCTYPE html> 2<html> 3  <head> 4    <title><%= title %></title> 5    <link rel='stylesheet' href='/stylesheets/style.css' /> 6  </head> 7  <body> 8    <header> 9      <h3>This is header</h3>10    </header>11    <main>12      <h1><%= title %></h1>13      List of programming languages14      <ul>15          <% list.forEach(function(item) {%>16        <li><%= item.name %></li>17          <%}); %>18      </ul>19    </main>20    <footer>21      <h3>This is footer</h3>22    </footer>23  </body>24</html>

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

1<!DOCTYPE html> 2<html> 3  <head> 4    <title><%= title %></title> 5    <link rel='stylesheet' href='/stylesheets/style.css' /> 6  </head> 7  <body> 8    <header> 9      <% include header %>10    </header>11    <main>12      <h1><%= title %></h1>13      List of programming languages14      <ul>15          <% list.forEach(function(item) {%>16        <li><%= item.name %></li>17          <%}); %>18      </ul>19    </main>20    <footer>21      <% include footer %>22    </footer>23  </body>24</html>

Pug

Pug - 以前名为 Jade，也是一个受欢迎的 Node.js 视图引擎项目。要使用它，请按如下方式设置视图引擎：

1//view engine setup2app.set('views', path.join(__dirname, 'views'));3app.set('view engine', 'pug');

通过上面的例子，我们使用以下内容创建了 pug 文件：

 1//file layout.pug 2doctype html 3html 4  head 5    title= title 6    link(rel='stylesheet', href='/stylesheets/style.css') 7  body 8    include header 9    block content10    include footer11//file index.pug12extends layout1314block content15  h1= title16  | List of programming languages17  ul18    each item in list19      li= item.name

我们可以看到在相同的内容中，Pug 的代码是如此清晰、简洁和易于理解。Pug 的工作方式与 Python 语言大致相同，即使用缩进或空格。

Hbs (Handlebars.js)

Hbs(Handlebars)

要使用此模板，需要把引擎视图设置为 hbs。同时必须注册 blocks（在 handlebarjs 中称为 partial），如下所示：

1var hbs = require('hbs');2hbs.registerPartials(__dirname + '/views/partials');3app.set('views', path.join(__dirname, 'views'));4app.set('view engine', 'hbs');

针对上述问题，我们还将创建具有以下内容的 hbs 文件：

 1// file layout.hbs 2<!DOCTYPE html> 3<html> 4  <head> 5    <title>{{title}}</title> 6    <link rel='stylesheet' href='/stylesheets/style.css' /> 7  </head> 8  <body> 9    {{> header}}10    {{{body}}}11    {{> footer}}12  </body>13</html><code class="language-javascript">1415// file /views/partials/header.hbs16<h3>This is header</h3>1718 //file /views/partials/footer.hbs 19 <h3> This   is   footer </h3> 2021 //file index.hbs 22 <h1> {{title}} </h1> 23 List of programming languages 24 <ul> 25   {{#each list}} 26     <li> {{name}} </li> 27   {{/each }} 28 </ul>

结论

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

原文：https://frontnet.eu/node-js-view-engine-try-out-some-of-the-most-popular/

什么是 Nod.js 视图引擎？

EJS

Pug

Hbs (Handlebars.js)

结论

更多相关文章

随机推荐