js模板引擎之artTemplate

時間 2019-11-25

原文原文鏈接

http://www.cnblogs.com/52fhy/p/5393673.htmljavascript

artTemplate 不支持requre.js，悲劇啊，只能用juicer啊

這個仍是比較有名的。html

簡介：java

artTemplate-3.0 新一代 javascript 模板引擎 https://github.com/aui/artTemplate template.js (簡潔語法版, 2.7kb) 支持if等語句{{ if admin }} {{/if}} template(id, data) 根據 id 渲染模板。內部會根據document.getElementById(id)查找模板。 若是沒有 data 參數，那麼將返回一渲染函數。 性能卓越，執行速度一般是 Mustache 與 tmpl 的 20 多倍（性能測試） 支持運行時調試，可精肯定位異常模板所在語句（演示） 對 NodeJS Express 友好支持 安全，默認對輸出進行轉義、在沙箱中運行編譯後的代碼（Node版本能夠安全執行用戶上傳的模板） 支持include語句 可在瀏覽器端實現按路徑加載模板（詳情） 支持預編譯，可將模板轉換成爲很是精簡的 js 文件 模板語句簡潔，無需前綴引用數據，有簡潔版本與原生語法版本可選 支持全部流行的瀏覽器

artTemplate區分簡潔語法版和原生語法版。這裏先演示簡潔語法版。git

使用前一樣先引入artTemplate.js:github

<script src="artTemplate/template.js"></script>

模板django

<!--模板--> <script id="js-tmp" type="text/html"> <div class="weui_media_box weui_media_text"> <a href="{{ url }}" class="" target="_blank"> <h4 class="weui_media_title">{{ title }}</h4> </a> <p class="weui_media_desc">{{ desc }}</p> </div> </script> <!--/模板-->

注意這裏模板與前面的示例不同了，直接使用一個type="text/html"的script標籤存放模板。artTemplate不支持textarea標籤。瀏覽器

模板裏變量使用{{ 變量 }}佔位。安全

js代碼函數

/本例再也不須要手動取模板內容
//var htmlTemp = $("textarea.js-tmp").val(); $.each(data, function(i,el) { htmlList += template("js-tmp", el); //注意第一個參數是id });

artTemplate使用基於document.getElementById(id)的方式直接獲取模板內容。這一點與其它模板有點不一樣，須要注意。性能

下面再看看artTemplate原生語法版。
須要引入替換成：

<script src="artTemplate/template-native.js"></script>

模板

<!--模板--> <script id="js-tmp" type="text/html"> <div class="weui_media_box weui_media_text"> <a href="<%= url %>" class="" target="_blank"> <h4 class="weui_media_title"><%= title %></h4> </a> <p class="weui_media_desc"><%= desc %></p> </div> </script> <!--/模板-->

原生語法版的artTemplate模板也不同，使用<%= 變量 %>的方式表示變量。

js代碼
無需改動，和上面簡潔語法版是同樣的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../../lib/template.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

{{/if}}
{{$data}}
</script>

<script>


var data = {
	title: '基本例子',
	isAdmin: true,
	list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

相關標籤/搜索

每日一句

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