Node 使用模板引擎art-template

阿新 • • 發佈：2020-10-05

我們開始通過前端瀏覽器傳送ajax請求獲取伺服器資料的，前端獲取資料後進行遍歷展示；

缺點就是傳送多次請求、不利於搜尋引擎查詢。

那麼如何改善呢？

可以修改為後端渲染資料，如使用模板引擎art-template

art-template一些資源

#npm 地址
https://www.npmjs.com/package/art-template
#github 地址
https://github.com/aui/art-template
#官方文件(經常被牆，可以看看下面這個)
https://aui.github.io/art-template/zh-cn/index.html
#看雲文件資料
https://www.kancloud.cn/lanju/art-template

介紹

art-template 是一個簡約、超快的模板引擎。

它採用作用域預宣告的技術來優化模板渲染速度，從而獲得接近 JavaScript 極限的執行效能，並且同時支援 NodeJS 和瀏覽器。

特性

擁有接近 JavaScript 渲染極限的的效能
除錯友好：語法、執行時錯誤日誌精確到模板所在行；支援在模板檔案上打斷點（Webpack Loader）
支援 Express、Koa、Webpack
支援模板繼承與子模板
瀏覽器版本僅 6KB 大小

安裝

Npm

npm install art-template --save

如上路表示安裝完成

瀏覽器版本直接去下載即可

語法

art-template 支援標準語法與原始語法。標準語法可以讓模板易讀寫，而原始語法擁有強大的邏輯表達能力。

標準語法支援基本模板語法以及基本 JavaScript 表示式；原始語法支援任意 JavaScript 語句，這和 EJS 一樣。

輸出

標準語法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始語法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

模板一級特殊變數可以使用 $data

加下標的方式訪問：

{{$data['user list']}}

原文輸出

標準語法

{{@ value }}

原始語法

<%- value %>

原文輸出語句不會對 HTML 內容進行轉義處理，可能存在安全風險，請謹慎使用。

條件

標準語法

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始語法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

迴圈

標準語法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

原始語法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

target 支援 array 與 object 的迭代，其預設值為 $data。
$value 與 $index 可以自定義：{% raw %}{{each target val key}}{% endraw %}。

變數

標準語法

{{set temp = data.sub.content}}

原始語法

<% var temp = data.sub.content; %>

模板繼承

標準語法

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

原始語法

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

模板繼承允許你構建一個包含你站點共同元素的基本模板“骨架”。範例：

<!--layout.art-->
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{block 'title'}}My Site{{/block}}</title>

    {{block 'head'}}
    <link rel="stylesheet" href="main.css">
    {{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>
<!--index.art-->
{{extend './layout.art'}}

{{block 'title'}}{{title}}{{/block}}

{{block 'head'}}
    <link rel="stylesheet" href="custom.css">
{{/block}}

{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

渲染 index.art 後，將自動應用佈局骨架。

子模板

標準語法

{{include './header.art'}}
{{include './header.art' data}}

原始語法

<% include('./header.art') %>
<% include('./header.art', data) %>

data 數預設值為 $data；標準語法不支援宣告 object 與 array，只支援引用變數，而原始語法不受限制。
art-template 內建 HTML 壓縮器，請避免書寫 HTML 非正常閉合的子模板，否則開啟壓縮後標籤可能會被意外“優化。

過濾器

註冊過濾器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};
template.defaults.imports.timestamp = function(value){return value * 1000};

過濾器函式第一個引數接受目標值。

標準語法

{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

{% raw %}{{value | filter}}{% endraw %} 過濾器語法類似管道操作符，它的上一個輸出作為下一個輸入。

原始語法

<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

如果想修改 {% raw %}{{{% endraw %}``{% raw %}}}{% endraw %} 與 <%``%>，請參考解析規則

API

template(filename, content)

根據模板名渲染模板。

引數

：
- {string} filename
- {Object,string} content
返回值

：
- 如果 content 為 Object，則渲染模板並返回 string
- 如果 content 為 string，則編譯模板並返回 function

var html = template('/welcome.art', {
    value: 'aui'
});

瀏覽器版本無法載入外部檔案，filename 為存放模板的元素 id

示例

編譯模板並快取。

// compile && cache
template('/welcome.art', 'hi, <%=value%>.');

// use
template('/welcome.art', {
    value: 'aui'
});

.compile(source, options)

編譯模板並返回一個渲染函式。

引數

：
- {string} source
- {Object} options
返回值：{function}

示例

var render = template.compile('hi, <%=value%>.');
var html = render({value: 'aui'});

.render(source, data, options)

編譯並返回渲染結果。

引數

：
- {string} source
- {Object} options
返回值：{string}

示例

var html = template.render('hi, <%=value%>.', {value: 'aui'});

.defaults

模板引擎預設配置。參考選項。

型別：{Object}

.extension

給 NodeJS require.extensions 註冊的模板渲染函式。

型別：{Object}

示例

載入 .ejs 模板：

var template = require('art-template');
require.extensions['.ejs'] = template.extension;

var view = require('./index.ejs');
var html = view(data);

.art 預設被註冊，可以直接使用：

var template = require('art-template');
var view = require('./index.art');
var html = view(data);

需要注意的是：此功能僅對 NodeJS 生效，如果要在瀏覽器中使用模板檔案渲染功能，請使用 Webpack art-template-loader。

使用

簡單Demo

art-test.html

<body>
<h1>你好</h1>
<h2>{{data[0].name}}</h2>
</body>

test.js

//引入art-template模組
var template = require('art-template');
//設定 模板根目錄 到當前路徑。如果 filename 欄位不是本地路徑，則在 root 查詢模板
template.defaults.root = './';
//根據模板名渲染模板
var html = template('./art-test.html',{data:[{name:123,age:345},{a:678,b:987}]});
console.log(html);

執行結果