有用過Handlebars模板引擎嗎？它的工作原理是怎樣的？

王铁柱6發表於2024-12-03

是的，我熟悉 Handlebars 模板引擎。它是一個流行的 JavaScript 模板庫，用於構建語義化模板。 它的工作原理可以概括如下：

  1. 模板編譯: Handlebars 將模板字串編譯成 JavaScript 函式。這個過程發生一次，可以預先編譯，也可以在執行時進行。編譯後的函式接受一個上下文物件作為引數。

  2. 上下文物件: 上下文物件包含模板渲染所需的資料。它通常是一個 JavaScript 物件，其屬性對應於模板中的變數。

  3. 資料繫結: Handlebars 使用雙花括號 {{...}} 作為佔位符，將上下文物件中的資料繫結到模板。例如，{{name}} 將被替換為上下文物件中 name 屬性的值。

  4. 表示式: Handlebars 支援簡單的表示式，例如 {{firstName}} {{lastName}}，以及更復雜的表示式，例如 {{user.address.city}}。

  5. Helper 函式: Helper 函式允許你新增自定義邏輯到模板中。例如，你可以建立一個 helper 函式來格式化日期或執行條件邏輯。Helper 函式使用 {{helperName parameter1 parameter2 ...}} 的語法呼叫。

  6. 內建 Helper 函式: Handlebars 提供了一些內建的 helper 函式，例如 #if、#unless、#each、#with 等，用於控制流程和迭代。

  7. 塊級 Helper 函式: 塊級 helper 函式允許你定義更復雜的邏輯，包括迴圈和條件渲染。它們使用 {{#helperName}} ... {{/helperName}} 的語法。例如，{{#each users}} ... {{/each}} 可以用來迭代 users 陣列。

  8. 部分: 部分允許你定義可重用的模板片段。它們使用 {{> partialName}} 的語法呼叫。

  9. HTML 轉義: 預設情況下，Handlebars 會對輸出進行 HTML 轉義，以防止跨站指令碼攻擊 (XSS)。你可以使用三個花括號 {{{...}}} 來禁用 HTML 轉義。

簡單示例:

// 模板字串
const template = Handlebars.compile("Hello, {{name}}!");

// 上下文物件
const context = { name: "World" };

// 渲染模板
const output = template(context);

// 輸出: Hello, World!
console.log(output);

更復雜的示例 (使用 #each helper):

const template = Handlebars.compile(`
<ul>
{{#each users}}
  <li>{{name}} - {{email}}</li>
{{/each}}
</ul>
`);

const context = {
  users: [
    { name: "Alice", email: "alice@example.com" },
    { name: "Bob", email: "bob@example.com" }
  ]
};

const output = template(context);

console.log(output);

總結:

Handlebars 透過將模板編譯成 JavaScript 函式，並使用上下文物件提供資料來渲染模板。它提供了豐富的功能，例如表示式、helper 函式、內建 helper 函式、塊級 helper 函式和部分，使你能夠建立動態和可重用的模板。 它的學習曲線相對平緩，並且擁有活躍的社群支援。

相關文章