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

时间 2019-11-16

标签那些最受欢迎 node.js node 视图引擎栏目 Node.js 繁體版

原文原文链接

做者：Alex Ronin
翻译：疯狂的技术宅javascript

原文：https://frontnet.eu/node-js-v...css

未经容许严禁转载html

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

什么是 Nod.js 视图引擎？

EJS
Pug (Formerly Jade)
Handlebars
Haml.js
Nunjucks
…

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

EJS

首先要为本文建立一个演示程序，咱们须要用 ExpressJS 建立一个项目。用express-generator 能够快速建立这个项目。node

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');
 
//...

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

编辑 routes/index.js 文件：npm

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，由于它很是简单易懂。

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

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

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

更多文章...