摘要：而框架中最常用的兩個視圖引擎是和。實際上這些上下文對象就是會在視圖中使用到的變量。其實視圖緩存并不是緩存視圖實際上它緩存的視圖路徑。根據(jù)默認視圖引擎將缺少拓展名的視圖文件補充完整。實際上存在由不同組織維護的兩個不同版本的。

前面的內(nèi)容大都是關(guān)于 Express 框架自身的內(nèi)容，包括：Express 簡介、工作原理、框架特點。在系列的最后，我們將把注意力放到 Express 框架周邊工具鏈上。學(xué)習(xí)如果使用這些工具來拓展 Express 框架的功能。

首先，本文我們將會討論視圖模版引擎的使用。通過這些模版引擎我們能過動態(tài)的生成 HTML 內(nèi)容。在前面我們已經(jīng)使用過 EJS 并使用變量語法實現(xiàn)內(nèi)容的注入。但是這些內(nèi)容只是整個模版引擎部分的冰山一角。接下來，將會學(xué)習(xí)到多種內(nèi)容注入方式、EJS，Pug 等模版引擎的特性。

在開始之前，我們有必要解釋下何為視圖引擎（view engine）？視圖引擎作為編程術(shù)語它主要意思是指“進行視圖渲染的模塊”。而 Express 框架中最常用的兩個視圖引擎是 Pug 和 EJS 。需要注意的是，Pug 早期的名稱是 Jade 由于某些原因不得已改名 。

另外，Express 并沒有指定必須使用何種引擎。只要該視圖引擎的設(shè)計符合 Express API 規(guī)范，你就可以將其應(yīng)用到工程中。下面，我們看看它到底是如何工作的。

下面我們通過一個簡單示例回顧下 EJS 渲染過程：

var express = require("express");
var path = require("path");
var app = express();

app.set("view engine", "ejs");

app.set("views", path.resolve(__dirname, "views"));

app.get("/", function(req, res) {
    res.render("index");
});

app.listen(3000);

在運行代碼之前，你需要通過 npm install 安裝 EJS 和 Express。在安裝完成后訪問應(yīng)用主頁的話，程序就會尋找 views/index.ejs 文件并使用 EJS 對其進行渲染。另外，工程中一般都只會使用一個視圖引擎，因為多個引擎會給工程引入不必要的復(fù)雜性。

下面我們看一個更為復(fù)雜的示例，其中會同時用到兩個視圖引擎 Pug 和 EJS：

var express = require("express");
var path = require("path");
var ejs = require("ejs");
var app = express();
app.locals.appName = "Song Lyrics";
app.set("view engine", "jade");
app.set("views", path.resolve(__dirname, "views"));
app.engine("html", ejs.renderFile);
app.use(function(req, res, next) {
    res.locals.userAgent = req.headers["user-agent"];
    next();
});
app.get("/about", function(req, res) {
    res.render("about", {
        currentUser: "india-arie123"
    });
});
app.get("/contact", function(req, res) {
    res.render("contact.ejs");
});
app.use(function(req, res) {
    res.status(404);
    res.render("404.html", {
        urlAttempted: req.url
    });
});
app.listen(3000);

雖然代碼看起來比較復(fù)雜，但其實分解后步驟也還簡單。下面，我們就對上面調(diào)用 render 處的代碼進行分析：

Express 在你每次調(diào)用 render 時都會創(chuàng)建上下文對象，并且在進行渲染時會傳入到視圖引擎中。實際上這些上下文對象就是會在視圖中使用到的變量。

Express 首先會將所有請求都公用的 app.local 中已存在的屬性添加視圖中。然后添加 res.locals 中的屬性并對可能與 app.local 沖突的屬性進行覆蓋操作。最后，添加 render 調(diào)用處的屬性并且也可能進行覆蓋操作。例如，訪問 /about 路徑時，上下文對象就包含三個屬性：appname、userAgent、currentUser；訪問 /contact 路徑時，上下文對象的屬性就只有 appname、userAgent ；而進行 404 處理時上下文對象的屬性就變成了：appname、userAgent、urlAttempted 。

緊接著，我們將會設(shè)置是否啟用視圖緩存。其實視圖緩存并不是緩存視圖實際上它緩存的視圖路徑。例如，它會將 views/my_views.ejs 路徑緩存起來并綁定到 EJS 引擎上。

Express 通過兩種方式來決定是否對視圖文件進行緩存：

文檔記錄方式：通過調(diào)用 *app.enabled("view cache")* 開啟。在開發(fā)模式下默認是被禁用的，但是你可以在正式生產(chǎn)環(huán)境中開啟。當然，你可以通過 *app.disable("view cache")* 手動關(guān)閉。

非文檔記錄方式：根據(jù)第一步上下文中的 *cache* 對象是否為 *true* 來決定是否緩存該文件。這樣你就可以對每一個文件進行自定義設(shè)置了。

接下來，Express 會設(shè)置視圖文件名及其使用的視圖引擎。如果在第二步中已經(jīng)進行了視圖緩存則可以直接跳到最后一步。否則，則繼續(xù)下一步。

根據(jù)默認視圖引擎將缺少拓展名的視圖文件補充完整。在本例中，about 會被拓展成 about.jade ，而 contact.ejs 以及 404.html 文件會保存不變。如果你既沒有指定默認視圖引擎也沒有明確拓展名，那么程序會出現(xiàn)崩潰。

通過文件拓展名進行視圖引擎匹配。對于 .html 格式文件則根據(jù) app.engine("html", xx); 設(shè)置進行匹配。

在視圖問價夾下，查找視圖文件名對應(yīng)的文件。如果不存在則報錯。

判斷查找到的視圖文件是否需要進行緩存。

使用引擎對視圖文件進行渲染并生成最終的 HTML 文件。

同時使用多個視圖引擎確實為程序增加了不必要的復(fù)雜性，好在絕大多數(shù)時候我們并不會這樣做。

Express 給客戶端默認響應(yīng)的內(nèi)容是 HTML。雖然大多數(shù)時候這沒什么問題，但是有時可能需要返回的是純文本、XML、JSON 等格式。此時，你可以通過修改參數(shù) res.type 進行自定義設(shè)置：

app.get(“/”, function(req, res) { 
? res.type(“text”); 
? res.render(“myview”, { 
?? currentUser: “Gilligan” 
? }); 
} 

當然，你可以使用更簡單的 res.json

除了 EJS 和 Pug 之外，其實還有很多中模版引擎。但是這些模版引擎可能并不像 EJS 和 Pug 那樣是為 Express 專門設(shè)計的。此時如果需要使用這些未適配的模版引擎，我們就不得不使用 Consolidate.js 進行封裝以期能夠兼容 Express API。而且 Consolidate.js 支持的種類也非常多，你可以在項目首頁看到完整的支持列表。

假設(shè)，現(xiàn)在你正是使用的引擎是與 Express 并不兼容的 Walrus。那么，下面我們看 Consolidate 是如何進行兼容適配工作的。

首先，使用 npm install walrus consolidate 安裝相關(guān)類庫和依賴項，然后我們將其引入：

var express = require("express");

var engines = require("consolidate");
var path = require("path");
var app = express();

app.set("view engine", "wal");
app.engine("wal", engines.walrus);
app.set("views", path.resolve(__dirname, "views"));

app.get("/", function(req, res) {
    res.render("index");
});
app.listen(3000);

是不是很簡單？只需幾行代碼我們就完成了整個適配工作。所以當有兼容適配需求的時候，我強烈建議你使用 Consolidate 而不是自己悶頭干。

EJS 是 Express 中最簡單也是最受歡迎的視圖引擎之一。它可以為字符串、HTML、純文本創(chuàng)建模版，而且他的集成也非常簡單。它在瀏覽器和 Node 環(huán)境中都能正常工作。它與 Ruby 中的 ERB 與法非常的類似。

實際上存在由不同組織維護的兩個不同版本的 EJS。雖然在功能上它們很相似，但是并不是同一個類庫。其中 Express 中使用的 EJS 是由 TJ Holowaychuck 維護的，你可以通過 npm 查找到該類庫。另一個同名類庫在 09 年就停止了更新且它不能在 Node 環(huán)境中運行。

除了用做 HTML 模版之外，它還能應(yīng)用于字符串和純文本中。請看 EJS 是如何對下面文本模版進行渲染的：

Hi <%= name %>!
You were born in <%= birthyear %>, so that means you"re <%= (new Date()).getFullYear() - birthyear %> years old.
<% if (career) { -%>
  <%=: career | capitalize %> is a cool career!
<% } else { -%>
  Haven"t started a career yet? That"s cool.
<% } -%>
Oh, let"s read your bio: <%- bio %> See you later!

將下面的 JSON 數(shù)據(jù)傳入上面摸板中：

{
    name: "Tony Hawk",
    birthyear: 1968,
    career: "skateboarding",
    bio: "Tony Hawk is the coolest skateboarder around."
}

最終，得到的渲染結(jié)果是（假設(shè)當前是 2015 年）：

Hi Tony Hawk!
You were born in 1968, so that means you’re 47 years old.
Skateboarding is a cool career!
Oh, let’s read your bio: Tony Hawk is the coolest skateboarder around. See
you later!

該示例演示了 EJS 常用的四種語法：打印、打印并轉(zhuǎn)義、執(zhí)行 JS 代碼、過濾。

在 EJS 你可以使用兩種語法打印表達式的值：<%= expression %> 和 <%- expression %>，其中前者會對結(jié)果進行 HTML 轉(zhuǎn)義。例如，當傳入的 expression 值為 Express 時，前者執(zhí)行的結(jié)果是 Express 而后者得到的字符串是 Express。我建議你使用前一種方式，因為它更為可靠。

同樣，EJS 還允許你 通過 <% expression %> 語法在其中執(zhí)行 JS 表達式，并且該表達式并不會被打印出來。該特性在執(zhí)行循環(huán)和條件判斷的時候非常有用。另外，你還可以通過 <% expression -%> 避免不必要的換行。

通過 <%=: expression | xxx %> 語法，我們可以對表達式結(jié)果再進行一次過濾處理。例如，上面我們就對表達式結(jié)果應(yīng)用了首字母大寫過濾器。當然，除了自帶的大量過濾器之外，你還可以進行自定義。

這里，我做了一個 EJS 的示例程序。雖然界面不是很好看，但是你能從中熟悉 EJS 的各種語法使用。

EJS 引擎允許你在當前模版中使用另一個 EJS 模版。這樣我們就能對整個進行組件拆分復(fù)用。例如，將 HTML 的頭部和尾部拆分為 header 和 footer 模塊，然后在其他模版中進行組合復(fù)用。

示例如下：首先我們創(chuàng)建 header.ejs 并拷貝代碼：

    
    
    

        
This is a Pug example
        

            
Wow.
        
    

你可以去 Pug 項目主頁去查看它時如何實現(xiàn)這種轉(zhuǎn)變的。

布局時所有模版語言的一個重要特性。它可以讓我們實現(xiàn)公共組件然后在其他文件中實現(xiàn)復(fù)用。例如，我們可以將頁面的 header 和 footer 抽離出來。這樣不僅可以保證所有頁面的 header 和 footer 內(nèi)容的一致，而且修改起來也更加方便。

Pug 布局的實現(xiàn)步驟大致如下：

第一步，為所有頁面定義一個主布局文件，而該文件幾乎就是一個空模版。它用 block 語法進行占位操作，然后實際生成的頁面會使用內(nèi)容替換這些占位符。示例如下：

doctype html
html
  head
    meta(charset="utf-8")
    title Cute Animals website
    link(rel="stylesheet" href="the.css")
    block header  
  body
    h1 Cute Animals website
    block body  

你可以看到上面定義了 header 和 body 兩個占位符。下面我們將它保存到 layout.jade 文件中。緊接著我們實現(xiàn)其中的 body 塊：

extends layout.jade
block body
  p Welcome to my cute animals page!

layout.jade 將會被渲染成：

  
    
    
    
  
  
    
Cute Animals website
    
Welcome to my cute animals page!
  

注意到當你拓展主布局時，并不一定需要實現(xiàn)其中的所有占位塊。例如上面就沒有實現(xiàn) header 。

在其他頁面可以對 body 塊進行不同的實現(xiàn)：

extends layout.jade
block body
  p This is another page using ths layout.
  img(src="cute_dog.jpg" alt="A cute dog!")
  p Isn"t that a cute dog!

Pug 通過布局進行組件分離讓我們可以避免一些重復(fù)的代碼。

Pug 中還有一個被稱為 Mixins 的酷炫特性。通過該特性你可以對文件中可能需要反復(fù)使用的功能進行一次定義。下面，我們就通過該特性對前面 EJS 部分用戶信息展示的功能進行重新實現(xiàn)：

mixin user-widget(user)
  .user-widget
    img(src=user.profilePicture)
    .user-name= user.name
    .user-bio= user.bio
    
// 展示當前用戶
+user-widget(currentUser)  

// 展示用戶列表
- each user in userList 
  +user-widget(user)

Pug 的基礎(chǔ)內(nèi)容到此為止，更多語法細節(jié)請查看官方文檔。

這章的內(nèi)容包括：

Express 的視圖系統(tǒng)，以及它是如何進行動態(tài)渲染的。

EJS 引擎的語法和基本使用。

Pug 引擎的語法和基本使用。

原文地址