javascript 模板引擎artTemplate

使用过程中的问题(环境不是nodeJS)

在使用artTemplate的时候渲染数据结构复杂的时候，想要使用template.helper()去获取想要的数据时，显示 “template.helper() is not a function”,然后在下载的template-web.js里面也没有找到helper()方法，如果有在非nodejs环境下使用过这个方法的，麻烦大神留个言。

下面说一下我的解决方法：使用template.js
参考：http://blog.csdn.net/wu6660563/article/details/51780516

template使用registerFunction 对数据进行过滤

<div class="res-list" id="res-container">    <script id="resList" type="text/template">      <%for(i = 0; i < data.length; i++) {%>          <div class="res-item">              <div class="item-title">                  <span class="time"><%=dateFormat(data[i].workDate)%></span>             </div>          </div>       <%}%>    </script></div><script type="text/javascript" src="../js/template.js"></script><script type="text/javascript">var obj = {    url:'xxx',    data:'xxx'}$.ajax({        url: obj.url,        type: 'POST',        dataType: 'json',        data: JSON.stringify(obj.data),                async: false,        cache: false,        contentType: 'application/json;charset=UTF-8',        success: function (res) {            if(data.data.length != 0){                    var dataList = document.getElementById('resList').innerHTML;                    var html = template(dataList, data);                    $("#res-container").append(html);                }        },        error: function (ret) {        }    });    //由周一时间获得一周的事件间隔（7.10-7.21）    template.registerFunction('dateFormat', function (date) {        var endTime = date + 6*24*60*60*1000;        return getMonthDay(date) +'-'+getMonthDay(endTime);    });</script>

快速上手

编写模板

使用一个type=”text/html”的script标签存放模板：

<script id="test" type="text/html">    <h1><%=title%></h1>    <ul>        <%for(i = 0; i < list.length; i ++) {%>            <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>        <%}%>    </ul></script>

模板逻辑语法开始与结束的界定符号为<% 与%>，若<%后面紧跟=号则输出变量内容。

渲染模板

template.render(id, data)

var data = {    title: '标签',    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};var html = template.render('test', data);document.getElementById('content').innerHTML = html;

嵌入子模板

<%include(id, [data])%>语句可以嵌入子模板，其中第二个参数是可选的，它默认传入当前的数据。

<script id="test" type="text/html">    <h1><%=title%></h1>    <%include('list')%></script><script id="list" type="text/html">    <ul>        <%for(i = 0; i < list.length; i ++) {%>            <li>条目内容 <%=i + 1%> ：<%=list[i]%></li>        <%}%>    </ul></script>

不转义HTML

模板引擎默认数据包含的 HTML 字符进行转义以避免 XSS 漏洞，若不需要转义的地方可使用==。

<script id="test" type="text/html">    <%==value%></script>

若需要关闭默认转义，可以设置template.isEscape = false。

在js中存放模板

template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的，如果使用了 id 参数，可以使用template.render(id, data)渲染模板。

var source =      '<ul>'    +    '<% for (var i = 0; i < list.length; i ++) { %>'    +        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'    +    '<% } %>'    + '</ul>';    var data = {        list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']    };    var render = template.compile(source);    var html = render(data);    document.getElementById('content').innerHTML = html;

添加辅助方法

template.helper(name, callback)辅助方法一般用来进行字符串替换，如 UBB 替换、脏话替换等。

例如扩展一个UBB替换方法：

template.helper('$ubb2html', function (content) {        return content        .replace(/[b]([^[]?)[/b]/igm, '<b>$1</b>')        .replace(/[i]([^[]?)[/i]/igm, '<i>$1</i>')        .replace(/[u]([^[]?)[/u]/igm, '<u>$1</u>')        .replace(/[url=([^]])]([^[]?)[/url]/igm, '<a href="$1">$2</a>')        .replace(/[img]([^[]?)[/img]/igm, '<img src="$1" />');    });

在模板中的使用方式：

<%=$ubb2html(content) %>

注意：引擎不会对辅助方法输出的 HTML 字符进行转义。

设置界定符

若前端模板语法与后端语法产生冲突，可以修改模板引擎界定符，例如：

template.openTag = "<!--[";template.closeTag = "]-->";

自定义语法

artTemplate 提供一个语法扩展用来简化模板逻辑语法。语法示例：

{{if admin}}   <h3>{{title}}</h3>   <ul>        {{each list}}        <li>{{$index + 1}}: {{$value}}</li>        {{/each}}   </ul>{{/if}}

安装：把 extensions/template-syntax.js 合并到 template.js 底部。
更多语法说明

自动化工具

预编译工具
使用它可以让前端模版不再受浏览器的限制，支持如后端模版一样按文件放置、include 语句等特性，可以像后端一样书写前端模板！

编译后的模板不再依赖前端模板引擎与后端，模板可以通过 SeaJS 或 RequireJS 等加载器进行异步加载，亦能利用它们成熟的打包合并工具进行上线前的优化，如合并与压缩。

项目主页：https://github.com/aui/tmodjs

抽取工具
./tools/combine.html

可以把 HTML 中的模板提取出来以便把模板嵌入到 js 文件中。

与编译工具不同的是，抽取后的模板仍然依赖引擎运行。

模板编码规范
1、不能使用 javascript 关键字作为模板变量(包括 ECMA5 严格模式下新增的关键字):

break, case, catch, continue, debugger, default, delete, do, else, false, finally, for, function, if, in, instanceof, new, null, return, switch, this, throw, true, try, typeof, var, void, while, with, abstract, boolean, byte, char, class, const, double, enum, export, extends, final, float, goto, implements, import, int, interface, long, native, package, private, protected, public, short, static, super, synchronized, throws, transient, volatile, arguments, let, yield
2、模板运行在沙箱中，内部无法访问外部变量，除非给模板定义辅助方法。例如：

 template.helper('Math', Math)

模板中若任意引用外部对象，复杂的依赖管理将会让项目难以维护，这种方式将利于后续模板迁移（包括通过工具预编译）。

转自：https://www.lvtao.net/web/javascript-artTemplate.html