artTemplate 自定义语法扩展
转自：http://www.ldisp.com/a/javascript/2014/artTemplate.shtml
artTemplate是个很好的JS模板引擎，但个人觉得美中不足的地方是语法的写法，网络上已经有大牛人给artTemplate写了一套简化后的语法插件。这个语法插件我也使用了好几年了，用起来非常顺手，刚给其他人介绍是，找遍整个网络最后在百度快照中找到 这个简化的语法插件的相关文档，立刻拷贝贴过来以备不时之需。
artTemplate 默认采用的是原生的 javascript 语法，类似微型模板引擎 tmpl。不同的是 artTemplate 的模板会采用沙箱机制限制全局对象的读写，这种机制很大程度上能够避免模板产生维护性的问题：若模板中若引用外部对象，随着项目复杂度增加，那时候谁都不能确定模板中的变量到底是数据还是全局对象，这种复杂的依赖关系将为会项目带来巨大的维护成本。在 artTemplage 的设计中，公用的方法与数据由 template.helper() 方法管理，既满足定义公用辅助方法的需求，也避免依赖外部对象产生维护问题。
众所周知 javascript 的语法非常*，模板逻辑语句使用原生语法对于 javascript 开发人员来说几乎没有学习成本。但不可否认，模板的逻辑使用最多的也不过是条件表达式与循环表达式，而采用原生语法未免有大炮打蚊子的感觉，并且纯 javascript 语法对页面设计人员来说并不是那么容易掌握，因此设计一种简单易用的模板语法还是有必要的。
而 javascript 模板引擎语法无外乎三种类型：
1、崇尚强大与*的原生语法派
<h3><%=title%></h3>
<ul>
<% for (i = 0, l = list.length; i < l; i ++) { %>
<li>name: <%=list[i].user%>; url: <%=list[i].site%></li>
<% } %>
</ul>
2、崇尚干净利落的无逻辑派
<h3>{{title}}</h3>
<ul>
{{#list}}
<li>name: {{user}}; url: {{site}}</li>
{{/list}}
</ul>
其中原生语法派以 tmpl 为代表，无逻辑派以 Mustache 为代表。原生语法派与无逻辑派各有优劣：tmpl 语法最为*且强大，但弊端就是对设计人员不友好，阅读起来也比较吃力；而 Mustache 对设计人员非常友好，也非常利于模板迁移，但这种无逻辑语法弊端也十分明显，连最基本的数组索引值都没法输出。
3、求功能与易用平衡的中庸派
<h3>{{title}}</h3>
<ul>
{{#each list as val}}
<li>name: {{val.user}}; url: {{val.site}}</li>
{{/each}}
</ul>
中庸派较好的在功能与易用性之前取得了平衡，而且这种类型的模板语法也经过了后端模板的工业级应用考验，相对来说比较成熟。artTemplate 的自定义语法扩展也采用此类型语法，上面的模板例子用 artTemplate 的写法：
<h3>{title}</h3>
<ul>
{each list}
<li>name: {$value.user}; url: {$value.site}</li>
{/each}
</ul>
注：若没有特别说明，文章以下提到的 artTemplate 语法均指自定义语法。
安装扩展
只需要把 template-syntax.js 合并到 template.js 即完成自定义语法扩展安装。
表达式
"{" 与 "}" 符号包裹起来的语句则为模板的逻辑表达式。这两个界定符是可以自定义的，对应的配置属性接口是 template.openTag 与 template.closeTag。例如用 HTML 注释当作逻辑界定符：
template.openTag = '<!--{';
template.colseTag = '}-->';
输出表达式
对内容编码输出：
{content}
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。
不编码输出：
{echo content}
条件表达式
{if admin}
{content}
{/if}
{if user
'admin'} {content} {else if user
'007'} <strong>hello world</strong> {/if}
遍历表达式
无论数组或者对象都可以用 each 进行遍历。
{each list}
<li>{$index}. {$value.user}</li>
{/each}
其中 list 为要遍历的数据名称, $value 与 $index 是系统变量， $value 表示数据单条内容, $index 表示索引值，这两个变量也可以自定义：
{each list as value index}
<li>{index}. {value.user}</li>
{/each}
模板包含表达式
用于嵌入子模板。
{include 'templateID' data}
其中 'templateID' 是外部模板的 ID, data 为传递给 'templateID' 模板的数据。 data 参数若省略，则默认传入当前模板的数据。
{include 'templateID'}
辅助方法
先使用 template.helper() 注册公用辅助方法，例如一个简单的 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}
若辅助方法有多个参数使用一个空格分隔即可：
{helperName args1 args2 args3}
artTemplate 主页：http://aui.github.com/artTemplate/
原文来自零度科技：http://www.ldisp.com/a/javascript/2014/artTemplate.shtml