1. 模板引擎
中文文檔： https://aui.github.io/art-template/zh-cn/index.html
Github: https://github.com/aui/art-template
1.1 傳統項目中存在的問題
-
數據和HTML字符串拼接導致代碼混亂，拼接容易出錯，增加修改難度。
-
業務邏輯和用戶界面混合，代碼不易維護。
for (var i = 0; i < result.length; i++) {
html += '<!DOCTYPE html>\
<html lang="en">\
<head>\
<meta charset="UTF-8">\
<title>'+ title +'</title>\
</head>\
<body>\
<h1 οnclick="sayHi('+name+')">你好,'+name+' 我今年 '+age+'歲</h1>\
<ul>\
<li title="'+hobbies[0]+'">'+hobbies[0]+'</li>\
</ul>\
</body>\
</html>';
}
1.2 模板引擎的作用
- 使用模板引擎提供的模板語法可以使數據和HTML字符串拼接的更加美觀，代碼易於維護。
- 模板引擎能夠使用戶界面的數據拼接和JavaScript業務邏輯分離，增加程序的可擴展性。
- 使用模板引擎可以提高開發效率。
<h1>你好, {{name}}, 我今年{{age}}歲</h1>
<ul>
{{each}}
<li>{{$value.hobbies}}</li>
{{/each}}
</ul>
1.3 模板渲染
<script src="./js/template-web.js"></script>
<script type="text/html" id="tpl">
<div>
<span>{{name}}</span>
<span>{{age}}</span>
</div>
</script>
// 將特定模板與特定數據進行拼接
const html = template('tpl',{
name: '張三',
age: 20
});
2. 模板語法
模板語法的作用是告訴模板引擎數據和模板要如何進行拼接。
2.1 輸出
將數據顯示在模板中。
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
2.2 原文輸出
如果數據中攜帶HTML標籤，默認情況下，模板引擎不會解析標籤，會將其轉義後原文輸出。
<h2>{{@ value }}</h2>
2.3 條件判斷
{{if 條件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
{{if 條件}}
<div>條件成立 顯示我</div>
{{else}}
<div>條件不成立 顯示我</div>
{{/if}}
2.4 循環
{{each target}}
{{$index}} {{$value}}
{{/each}}
2.5 導入模板變量
<div>$imports.dataFormat(time)</div>
template.defaults.imports.變量名 = 變量值;
$imports.變量名稱
function dateFormat（未格式化的原始時間）{
return '已經格式化好的當前時間'
}
template.defaults.imports.dateFormat = dateFormat;