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>