全端勇士之路 Node.js 基礎學習-Express template 篇

發表於 | 更新於 | 分類於

前言

新的章節又開啟了，接下來將會講到 template，tempalte 在開發上是非常常見的一個技術，所以這邊這篇就先來介紹一下吧

template 語言

以往我們開發前端都是靜態的 HTML 頁面，當若頁面有 100 頁，那可能有一天 header 要做調整，那就變成要調整 100
頁，其實這對於開發來講非常的沒有效率，所以就出現了 template 這個東西，那業界常見的 template 又有那些呢?這邊來主要介紹兩個

EJS template

如果是新手入門的話，我建議使用 EJS　template，因為與寫 HTML 並沒有太大的差異，所以學習曲線上是比較低的，那叫做 template 語言，所以它就可以寫一些變數、迴圈或是設置 layout，舉例來講，若要傳入變數或撰寫程式碼，都會使用 <% %> 包覆

1
2
3
4
5
6
7
<p>
<% title %>
</p>

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

這樣就是代表一個程式碼區間的意思

那它每一種標籤的形式都不太一樣，這邊可以去官網看更詳細

jade/pug template

若要拿 EJS 與 pug 做比較的話，好比 SCSS VS SASS，大家都知道後者 SASS 的學習曲線會較 SCSS 高，那 PUG 也是，而 PUG 撰寫的方式稍微有點不太一樣，會非常的簡寫，程式碼區間則是沒有特別的標記符號，但變數則是使用等於(=)

1
2
3
ul
  each val in [1, 2, 3, 4, 5]
    li= val

如果想更了解的話可以看看官網

基本上這兩種 template 都可以了解一下，畢竟各有好壞。

0%