當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

art-template模板引擎详解

發布時間：2024/7/5 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 art-template模板引擎详解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 模板引擎

art-template中文文檔：https://www.kancloud.cn/lanju/art-template/1500276

1.1 Ajax 項目中存在的問題

數據和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 模板渲染

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 循環

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 上传