智者一切求自己,愚者一切求他人 [登录·注册]

吕滔博客

首页 开发 运维 工具 摄影

javascript 模板引擎artTemplate

前端设计 memory 发布于November 15, 2013 标签: JavaScript

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[i]%></li>
        <%}%>
    </ul>
</script>

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

渲染模板

template.render(id, data)

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

演示

嵌入子模板

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

<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 语句等特性,可以像后端一样书写前端模板!

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

项目主页:<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)

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

所有演示例子 | 引擎原理

相关推荐

添加新评论

全部评论:已有 3 条评论

  1. cnjs

    谢谢。解决了转义问题。我还傻傻的自己编函数去反转义 还是对这个template没系统的理解

  2. 张先生

    你好,我在JS模板里写了一段JS代码,最终输出的时候出现ERROR,怎么才能做到在模板里可以嵌入JS代码呢,示例代码如下:

    标题: ${function(){ alert('1'); }};

    1. memory

      你可以看下它官网的:https://github.com/aui/artTemplate

网站状态

  • 栏目分类:49个
  • 发布文章:1324篇
  • 用户评论:697条
  • 开博至今:3998天

正则速查

[abc] 匹配中括号中的单个字符,如a或b或c
[^abc] 匹配除了a、b、c等字符的其他单个字符
[a-z] 匹配一个字符范围,如a到z
[a-zA-Z] 匹配一个字符范围,如a-z 或 A-Z
^ 匹配行的开始
$ 匹配行的结束
\A 匹配一个字符串的开始
\z 匹配一个字符串的结束
. 匹配任意单个字符
\s 匹配空白字符,如空格,TAB
\S 匹配非空白字符
\d 匹配一个数字
\D 匹配非数字
\w 匹配一个字母
\W 匹配非字母
\b 匹配字符边界
(...) 引用所有括号中的内容
(a|b) a或者b
a? 零个或1个a
a* 零个或多个a
a+ 1个或多个a
a{3} 3次重复的a
a{3,} 3次或3次以上重复的a
a{3,6} 3到6次重复的a

修正符

/g 查找所有可能的匹配
/i 不区分大小写
/m 多行匹配
/s 单行匹配
/x 忽略空白模式
/e 可执行模式,PHP专有
/A 强制从目标字符串开头匹配
/D 使用$限制结尾字符,则不允许结尾有换行
/U 只匹配最近的一个字符串;不重复匹配

最新回复

  • tomxuetao: 能个实例吗?
  • memory: 哈哈哈。。。话说也没毛病。
  • 硫酸亚铁: 看了文章觉得自己已经是松鼠癌了 东西总是先占着 反正我有 什么...
  • xl: 支持一下
  • iHerb海淘攻略: 感谢分享
  • memory: POINT
  • sunyunlin: 数据库应该建些什么字段?
  • pengcheng: 已解决
  • pengcheng: Oops! It seems that sphinx was b...
  • 券都有: 感谢分享
  • memory: 这是我3年前玩过一次,当时因为安装完后,发现日常办公还好,但是好...
  • sdf: 想问一下,激活工具激活后,后面会出现提示要再次重新激活吗?
  • memory: 你要用碗装我吗?还是要我把扔的扔进你碗里???!!! &^_^&
  • 薛才杰: 同感,快扔到我的碗里来。。。
  • memory: 要说明一下,在大陆及香港的云主机或VPS,都是不支持的。原因都懂...
  • 历史趣谈LishiQtan: 很好的文章,值得收藏
  • memory: 现在回头看,,,这么烂的代码,也是醉了.