那些最受歡迎的 Node.js 視圖引擎[每日前端夜話0xA7]

每日前端夜話0xA7

每日前端夜話，陪你聊前端。

每天晚上18:00準時推送。

正文共：1251 字

預計閱讀時間：7 分鐘

作者：Alex Ronin

翻譯：瘋狂的技術宅

來源：frontnet

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 可以快速建立這個項目。

sudo npm install express-generator -g
express --view=ejs Demo_EJS

複制

運作以上指令用 Node.js ejs 視圖引擎建立項目時，我們的項目具有以下目錄結構：

Node.js 項目檔案清單

通過上面的指令，我們用 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(Handlebars)

要使用此模闆，需要把引擎視圖設定為 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，因為它非常簡單易懂。

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

下面夾雜一些私貨：也許你和高薪之間隻差這一張圖

2019年京程一燈課程體系上新，這是我們第一次将全部課程清單對外開放。

願你有個好前程，願你月薪30K。我們是認真的！

往期精選

BootstrapVue 入門
JavaScript的工作原理：引擎、運作時和調用堆棧
用 TypeScript 開發 Node.js 程式
快速上手最新的 Vue CLI 3
JavaScript 程式員可以從C ++中學到些什麼
在同一基準下對前端架構進行比較
Edge 擁抱 Chromium 對前端工程師意味着什麼？
使你的 JavaScript 代碼簡單易讀
Node.js多線程完全指南
deno如何償還Node.js的十大技術債
實戰！半小時寫一個腦力小遊戲
CSS Flexbox 可視化手冊
世界頂級公司的前端面試都問些什麼
V8引擎内部機制及優化代碼的5個技巧