javascript 模板引擎artTemplate

artTemplate

新一代 javascript 模板引擎

=================

artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍（性能测试）。

引擎支持调试。若渲染中遇到错误，调试器可精确定位到产生异常的模板语句，解决前端模板难以调试的问题（详情）。

另外，artTemplate 的模板还支持使用自动化工具预编译，这一切都在 2KB(Gzip) 中实现！

快速上手

编写模板

使用一个

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%></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(/http://blog.csdn.net/orichisonic/article/details/([^[]?)/igm, '<b>$1</b>')

        .replace(/[i]http://blog.csdn.net/orichisonic/article/details/([^[]?)/igm, '<i>$1</i>')

        .replace(/http://blog.csdn.net/orichisonic/article/details/([^[]?)/igm, '<u>$1</u>')

        .replace(/])]http://blog.csdn.net/orichisonic/article/details/([^[]?)/igm, '<a href="$1">$2</a>')

        .replace(//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)

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

更新记录

v2.0.2

1.    优化自定义语法扩展，减少体积

2.    [重要]为了最大化兼容第三方库，自定义语法扩展默认界定符修改为

{{

与

}}

。

3.    修复合并工具的BUG #25

4.    公开了内部缓存，可以通过

template.cache

访问到编译后的函数

5.    公开了辅助方法缓存，可以通过

template.helpers

访问到

6.    优化了调试信息

v2.0.1

1.    修复模板变量静态分析的BUG

v2.0 release

1.    编译工具更名为 atc，成为 artTemplate 的子项目单独维护：<https://github.com/cdc-im/atc>

v2.0 beta5

修复编译工具可能存在重复依赖的问题。感谢 @warmhug
修复

include

内部实现可能产生上下文不一致的问题。感谢
@warmhug
支持使用拖拽文件到

compile.cmd

图标上进行单独编译

v2.0 beta4

修复编译工具在压缩模板可能导致 HTML 意外截断的问题。感谢 @warmhug
完善编译工具对

include

支持支持，可以支持不同目录之间模板嵌套
修复编译工具没能正确处理自定义语法插件的辅助方法

v2.0 beta1

1.    对非String、Number类型的数据不输出，而Function类型求值后输出。

2.    默认对html进行转义输出，原文输出可使用

<%==value%>

，也可以关闭默认的转义功能

template.isEscape
= false

。

3.    增加批处理工具支持把模板编译成不依赖模板引擎的 js 文件，可通过 RequireJS、SeaJS 等模块加载器进行异步加载。

授权协议

Released under the MIT, BSD, and GPL Licenses

============