那些最受歡迎的 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>