js模板引擎使用

⑴ Express 學習筆記純干貨（Routing、Middleware、託管靜態文件、view engine 等等）

Express 是一個基於 Node.js 的輕量級、快速、開放的 Web 開發框架，旨在簡化 Web 和移動應用的構建。它以路由和中間件為核心構建，提供了一系列強大的功能，幫助開發者快速構建健壯、友好的 API 和 Web 應用。

Express 不僅簡化了 Node.js 的特性，而是通過擴展 Web 應用所需的必備功能，提供了一系列豐富的 HTTP 方法和靈活的中間件組合，讓 API 和 Web 應用的構建變得簡單且高效。

### 安裝和 hello world 示例

在安裝 Express 時，若使用 `--save` 參數，表示將模塊添加到項目的 `package.json` 文件的 `dependencies` 部分，便於自動安裝依賴。若只需臨時安裝，可省略 `--save`。在創建項目文件夾後，如果文件夾名稱與依賴名相同（例如 `express`），會導致安裝失敗，應刪除重復部分後重新安裝。

下面的代碼啟動了一個監聽 3000 埠的 Web 伺服器，對所有 `/` URL 返回 "hello world"，其他路徑返回 404 錯誤。`req` 和 `res` 對象遵循 Node.js 的標准，因此可以調用它們提供的方法，如管道操作。

### 路由（Routing）

路由定義了應用的端點以及對客戶端請求的響應，通過路徑和 HTTP 方法（如 GET、POST）組合而成。路由由特定的路徑和方法組成，可以使用字元串、正則表達式或字元串模式。

路由句柄可以是一個函數、數組或兩者混合，支持多個回調函數，其中 `next('route')` 可以跳過後續路由句柄。使用 `app.route()` 方法創建鏈式路由句柄，便於創建模塊化的路由邏輯。

### 中間件（Middleware）

中間件是函數，用於訪問請求對象、響應對象和中間件流程中的 `next` 函數。Express 中間件分為應用級、路由級和錯誤處理三種類型。錯誤處理中間件需使用 `err, req, res, next` 參數。

使用 `app.use()` 和 `router.use()` 載入中間件，應用級中間件綁定到 `app` 對象，路由級中間件綁定到 `express.Router()` 實例。

### 託管靜態文件

利用 `express.static` 中間件託管靜態文件，如圖片、CSS 和 javaScript。通過傳遞靜態資源目錄作為參數，可訪問所有文件，無需在 URL 中顯示目錄名。

通過多次調用 `express.static` 並指定不同的掛載路徑，可以提供多個目錄的靜態資源訪問。

### 模板引擎使用

安裝模板引擎並編寫模板文件。創建路由來渲染模板，模板文件將被轉換為 HTML。若未設置視圖引擎，需指定視圖文件後綴。

### Express 4 遷移指南

Express 4 是對 Express 3 的重大重構，應用更新至 Express 4 後，之前的 Express 3 應用將無法運行。主要變化包括內核和中間件系統的改進、路由系統的優化以及一系列其他調整。

遷移過程包括卸載舊的 Express 3 應用生成器，安裝新的版本。確保遵循官方文檔中的步驟，以順利過渡到 Express 4。

⑵ 5分鍾上手Egg.js+nunjucks模板引擎快速開發SEO友好的官網項目

5分鍾上手Egg.js+nunjucks模板引擎快速開發SEO友好的官網項目的關鍵在於以下幾步：

1. 項目初始化：

   • 使用Egg.js框架初始化項目，這會生成基本的項目文件結構。
   • 在Egg.js的項目中，app目錄是關鍵，包含如router.js用於定義路由，Controller處理業務邏輯，以及Service用於數據獲取和處理。

2. 集成Nunjucks模板引擎：

   • 使用如eggviewnunjucks插件集成Nunjucks模板引擎，用於動態渲染頁面內容。
   • 定義模板文件夾，並創建基礎模板文件，包含head、content和script塊，用於頁面頭部、主體和腳本內容的組織。

3. 模板渲染與數據嵌套：

   • 在模板文件中，通過嵌套數據實現頁面的動態內容渲染。
   • 例如，通過if判斷為不同導航選項添加不同類名，只需在每個頁面中定義navActive變數並賦值。

4. 提升SEO友好度：

   • 使用伺服器端渲染技術，由Egg.js和Nunjucks配合實現，有利於搜索引擎抓取頁面內容，提升SEO友好度。
   • 確保頁面內容在初次載入時即完全呈現，無需依賴JavaScript非同步載入。

總結： 通過Egg.js框架和Nunjucks模板引擎的結合，開發者可以一站式搞定前後端開發，提高開發效率。 伺服器端渲染技術有利於提升網站的SEO友好度，使網站更容易被搜索引擎收錄和排名。

⑶ Handlebars在Coupang的應用與實踐

Handlebars.js是JavaScript實現的簡單易用模板引擎，基於Mustache模板語法，改進了如helper、nested path和literal等功能。Handlebars.java是Java版本的實現，兼容Handlebars.js公開API並擴展了一些功能，如block、partial、precompile、embedded和i18n等。

Handlebars.java在Coupang中的應用廣泛，用於PC主站、移動瀏覽器和應用內嵌webview頁面，以及後台管理系統等。在後端應用中，通過block和partial helper實現布局功能，定義可重寫和默認值的區域。

在開發中，自定義helper如when、json、default和assign等，以支持復雜任務。使用這些自定義helper簡化了模板，提高了代碼模塊化和可維護性。

前端Handlebars模板在Coupang實踐中經歷了不同階段。階段1使用RequireJS非同步載入模板並動態編譯，階段2通過後端預編譯模板減少前端編譯過程，階段3採用webpack及handlebars-loader將模板預編譯並與js文件打包，階段4實現前後端模板復用以減少維護成本。

開發前後端公用模板時，建議基於組件化方式，使用Handlebars.java和Handlebars.js共有的特性，盡量避免使用特有helper，提供缺失helper實現，並使用相同的數據模型。這種方式能實現前後端模板復用，減少維護工作量。

總之，Handlebars在Coupang中的應用與實踐展示了其在前後端分離、模板復用和自定義helper等方面的靈活性和效率。選擇合適的方案需根據具體場景進行權衡。