art-template模板引擎详解
生活随笔
收集整理的這篇文章主要介紹了
art-template模板引擎详解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1. 模板引擎
art-template中文文檔：https://www.kancloud.cn/lanju/art-template/1500276
1.1 Ajax 項目中存在的問題
數據和HTML字符串拼接導致代碼混亂，拼接容易出錯，增加修改難度。
業務邏輯和用戶界面混合，代碼不易維護。
1.2 模板引擎的作用
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;總結
以上是生活随笔為你收集整理的art-template模板引擎详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux Shell快速入门
- 下一篇： Express 结合 multer 上传