EJS 學習筆記

2020-05-01

EJS (Embbed JavaScript)，能夠利用 js 生成 html 的頁面引擎，類似的還有 pug 、 handlebar，自己最熟悉的則是 Asp.Net 的 Razor。寫 Razor 的感受十分流暢，想要重現 Razor 便利的功能是在打造 Gulp Starter Template 時的目標之一。

而 EJS 與 pug 相比，差異在於 EJS 的語法和原生 html 較為接近，只是多了額外的標籤來處理鑲嵌的 js ，pug 則類似 scss ，是精簡語法的 html，同時由於尚未在 vscode 上找到對應支援 pug css intellisense 的 plugin ，對於要快速開發需求時，可能多了翻查文件的不便，因此就決定以 EJS 作為 template 的 view engine。

相同於學習 Gulp 的經驗，先羅列出自己的需求，在尋找工具對應的處理方式，才是最有效的學習方式，因為能將學習的動機與成果回應到自己身上。

一開始在學習 EJS 時查看官方的 doc，發現也太簡短，只簡單帶到 if ，甚至沒有專門介紹 for ，後來才發現是因為 EJS 所使用的相關語法即 js 語法，不用另外再去學習，這點和 handlebars, pug 相比，真的有讓學習曲線更為平易近人的感受。

而這些需求包括：

1. variables
2. if
3. for loop
4. layout
5. partials

Variables 變數渲染

在 template 中能夠直接將資料及變數的寫入 html 之中，而不需要另外用 js 操作。

<% var msg = "hello, world" %>
<div> <%= msg %> </div>

If 條件控制

在 template 中能夠根據條件決定渲染 html 的方式。

<% var now =  new Date().getDate();%>

<% if (now == 10) { %>
    <div> 今天是發餉的日子。 </div>
<% } %>

for loop 迴圈

自動迭代 html ，而不需要手動重複或者操作 js 瘋狂的 append。

<% [1, 3, 5, 7, 9].forEach(element => { %>
    <div>
        <%= element%> 
    </div>
<% }) %>

layout and partials 模組化 HTML

不同於 razor 可以定義 layout，並在 layout 中定義 block 由不同的頁面實作 block 的內容。 EJS 提供的是 html import 的功能，用模組化的方式來引入 html，並將重複的 html 打造為模組。在 layout 的需求上，就是將共用的部分抽出為模組，並在各頁面中加以引用。

<!-- partial.ejs -->
<p style="color: #66cc33">
    <%= msg %> 
</p>

<!-- index.ejs -->
<%- include('partial', {msg: 'hello'}); %>

// gulpfile.js
const lodash = require("lodash");

gulp.task('EJS', () => {
    return gulp.src("./source/*.ejs")
    .pipe(EJS({
        lodash : lodash
    }))
}

<div>
    <%= lodash.random(1, 6) %> 
</div>