深入了解dot.js模板引擎

一、介紹

dot.js是一個簡約而強大的JavaScript模板引擎。它採用了邏輯分離和動態輸出的方法，擁有體積小，速度快，兼容性好等優點，可以勝任大部分前端模板渲染需求。在該模板引擎的創作者，美國人 West Suitor強調，他的初衷是讓編程變得更簡單。這一點在dot.js的語法看上去十分清爽的同時也體現了出來。

二、安裝和基礎使用

安裝和基礎使用都非常簡單，我們可以通過npm快速安裝：

npm install doT --save

然後就可以在JavaScript中使用了：

// 引入dot模塊
const doT = require('dot');

// 創建模板
const template = doT.template("Hello {{=it.name}}!");

// 渲染模板
console.log(template({ name: 'world' })); // 輸出 Hello world!

我們可以看到doT.template()方法傳入的是一個字元串模板，在渲染時，{{=it.name}}代表模板變數，後面的代碼則是需要渲染的數據。
另外，極其重要的一點是，模板引擎默認是不支持轉義HTML的，所以需要使用{{! }}代替{{ }}。

三、語法

在doT的語法上，不同於其他模板語言（如Jinja2），它採用了比較自然的JavaScript語法。

1. 循環語句

在doT中，我們可以通過for循環語句來循環一個數組或對象。例如：

{{~it.people :value:index}}
  {{=index}}. {{=value.name}} - {{=value.age}} 

{{~}}

在這個例子中，我們可以看到通過{{~it.people}}來循環一組數據，在循環內部，可以使用{{= }}來輸出變數值。注意，這裡的冒號(:)和tilda(~)是中間沒有空格的。

2. 分支語句

我們可以通過簡單的if語句來實現模板分支。例如：

{{? it.gift }}
  I have a present for you!
{{??}}
  Sorry, no gift this year.
{{?}}

在這個例子中，我們看到了一般if格式。

3. 子模板

我們可以通過{{#def.load()}}來實現子模板的功能。例如：

{{#def.body()}}
Hello {{=it.name}}!
{{#def.body()}}

在這個例子中，我們看到了如何向子模板傳遞參數、調用子模板及如何定義載入子模板的主模板函數。

四、編譯選項

從3.0.0版本開始，doT支持了更多的編譯選項，包括以下內容：

• evaluate: 最初和最後的代碼應該是plain文本還是編譯代碼。
• interpolate: 輸出的是否需要檢查HTML轉義。
• encode: 替換HTML實體中需要處理的字元。
• use: 用於在jsp、aspx等自定義標籤模板格式中。
• define: 定義一個模板function()。使用它可以在多次請求中重複使用它。
• string: 對於瀏覽器和可能需要支持IE低級瀏覽器的舊版本（即IE6/7/8），需要轉義正斜杠。因為正斜杠在JavaScript和正則表達式中都有特殊任務，所以很容易出現語法問題。這個選項在渲染時應該啟用。
• strip: 刪除模板中不需要的換行符及空格，以減少模板的大小。

這裡，我們以使用strip編譯選項為例，來實現縮減模板空格和換行符：

// 創建模板（使用strip編譯選項）

const template = doT.template(

'\n' +

'{{~it.people :value:index}}\n' +

'
{{=index}}. {{=value.name}} - {{=value.age}}
\n' +
 '{{~}}\n' +
 '
原創文章，作者：ZUER，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/147836.html