雜記node視圖模板引擎的選用

時間 2019-12-12

標籤雜記 node 視圖模板引擎選用简体版

原文原文鏈接

node開發，使用前端模板引擎的歷史中，嘗試過ejs, 陸陸續續用了一年的jade，後來都在用swig。html

用jade的過程當中仍是沒能適應它太靈活的縮進語法，沒能適應它跟html標籤語法比較大的誤差。我寫jade標籤的縮進嵌套時，常常出錯，而後就要一層層排查，代碼縮進原本只是爲了直觀的，在jade中倒是一種語法，用它來寫視圖，我的以爲很不爽。前端

後來我就開始找其餘的模板，但願它能像寫asp.net MVC的cshtml視圖文件同樣，大致保留html標籤的樣子，只在注入數據的時候，加上程序控制，與HTML混寫。node

後來就考慮ejs和swig, 整體上，ejs比swig強大，排名也靠前不少(ejs是TJ搞的, 自帶粉絲羣)，但我後來就一直用的swig，隨便選的，只要它能知足個人簡單需求就好了：git

保留基本的html標籤語法，直觀github
支持母版頁 layout，劃分代碼區域express
支持簡單的條件判斷、循環前端框架
輕量框架

關於swig, 沒在大型項目裏面實踐過，就本身寫過幾個小項目，沒有遇到過什麼坑。asp.net

下面簡單記錄幾條swig經常使用的功能點。spa

使用母版頁

母版頁通常是把頁面的總體區域規劃好的的，好比頂邊欄，側邊欄等。

新建layout.html，簡單搭建母版頁的架子，經過 {% block [set a name there] %}{% endblock %} 指定子頁面的填充區域
示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}這裏是引用的頁面添加title的輸入區域，子頁面設置title後，這裏會被覆蓋{% endblock %}</title>
</head>
<body>
<h1>主體內容能夠設置在下面</h1>
{% block content %}{% endblock %}
<hr/>
<p>下面是另外一個可添加內容的區域</p>
{% block footer %}{% endblock %}
</body>
{% block scripts %}{% endblock %}
</html>

而後新建另外一個字頁面child.html，應用母版頁，並填充對應區域，示例以下：

{% extends './layout.html' %}
{% block title %} 我是title，我會填充到母版頁的title block {% endblock %}
{% block content %}
    <p>我會填充到母版頁的 content block</p>
{% endblock %}
{% block footer %}
    <p>我會填充到母版頁的 footer block</p>
{% endblock %}
{% block scripts %}
    <script>
        console.log('我會在母版頁指定的位置加載，不會與其餘腳本的加載矛盾');
        console.log('就這樣輕易的學會了使用母版頁');
    </script>
{% endblock %}

用swig來渲染child.html，結果以下展現，根據結果來分析母版頁的使用方法，應該很直觀就能明白了。

使用注入的數據

假設渲染頁面前注入的數據是

{
     name: ’ni.ke’,
     age: 18
}

在頁面中經過{{ name }}語法便可渲染傳入數據對象的name屬性。

判斷和循環

{% if value %}
     <p>value真值時我會加載</p>
{%endif%}

{%for item in list%}
     <p>{{ item.value }}</p>
{%endfor%}

備註

若是是使用express前端框架，直接使用swig官方的package便可。若是使用Koa,能夠借用tj寫的 co-views 模塊來輔助，不只支持swig，也支持jade,ejs等模板引擎。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。