超快的前端模板引擎 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[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}}

使用帮助

自动化工具

预编译工具

使用它可以让前端模版不再受浏览器的限制,支持如后端模版一样按文件放置、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

  1. 修复编译工具可能存在重复依赖的问题。感谢 @warmhug
  2. 修复include内部实现可能产生上下文不一致的问题。感谢 @warmhug
  3. 支持使用拖拽文件到compile.cmd图标上进行单独编译

v2.0 beta4

  1. 修复编译工具在压缩模板可能导致 HTML 意外截断的问题。感谢 @warmhug
  2. 完善编译工具对include支持支持,可以支持不同目录之间模板嵌套
  3. 修复编译工具没能正确处理自定义语法插件的辅助方法

v2.0 beta1

  1. 对非String、Number类型的数据不输出,而Function类型求值后输出。
  2. 默认对html进行转义输出,原文输出可使用<%==value%>,也可以关闭默认的转义功能template.isEscape = false
  3. 增加批处理工具支持把模板编译成不依赖模板引擎的 js 文件,可通过 RequireJS、SeaJS 等模块加载器进行异步加载。
一个非侵入式、不会破坏原来静态页面结构、可被浏览器正确显示的、格式良好的前端HTML模板引擎。彻底实现前后端分离,让后端专注业务的处理。 传统MVC开发模式,V层使用服务器端渲染。美工设计好静态HTML文件,交给后端工程师,需要转换成Jsp、Freemarker、Velocity等动态模板文件。这种模式有几个缺点 1、动态模板文件不能被浏览器解释、必须要运行在服务器才能显示出效果 2、动态效果和静态效果分别存在不同文件,美工和后端工程师需要分别维护各自页面文件,其一方需要修改页面,都需要通知另一方进行修改 3、页面数据不能分块加载、获取跨域数据比较麻烦 domTemplate.js 模板引擎是通过在标签添加自定义属性,实现动态模板功能,当没有引入domTemplate脚本, 则自定义标签属性不会被浏览器解析,不会破坏原有静态效果,当引入domTemplate脚本,模板引擎回去解析这些标签属性, 并加载数据进行动态渲染。 下图:对比服务器页面渲染和使用domTemplate前端引擎开发流程 服务器端模板解析 domTemplate前端解析 用法 导入jquery.js或者zepto.js和domTemplate.js $(function () {  $.domTemplate.init(options); //可以通过selector指定根节点,默认根节点是body,表示从body开始,渲染整个页面  }); 或者解析某一个html片段。 $('selector').domTemplate(options); //渲染数据是通过h-model 自动去获取数据,也可以通过data指定全局数据 if条件标签 <div> <p h-if="{user.id==50}" h-text="用户ID等于50">xxx</p> <p>其他内容</p> <div> switch条件标签 <p h-switch="{user.id}"> <input type="text" h-case="20" h-val="{user.email}"/> <input type="text" h-case="60" h-val="拉拉"/> <input type="text" h-case="*" h-val="丽丽"/>  </p> each遍历标签 <p>遍历List例子</p> <ul> <li h-each= "user,userStat : {users}" h-text="{userStat.index 1}-{user.email}"> 李小璐</li> </ul> 自定义标签 $.domTemplate.registerTag('tagName',function(ctx,name,exp){ }); //tagName 是自定义标签名称,用时要加上前缀,如定义'test'标签,用时h-test="" 标签:domTemplate 分享 window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdMiniList": [], "bdPic": "", "bdStyle": "1", "bdSize": "24" }, "share": {} }; with (document)0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' ~(-new Date() / 36e5)];\r\n \r\n \r\n \r\n \r\n \u8f6f\u4ef6\u9996\u9875\r\n \u8f6f\u4ef6\u4e0b\u8f7d\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\nwindow.changyan.api.config({\r\nappid: 'cysXjLKDf', conf: 'prod_33c27aefa42004c9b2c12a759c851039' });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值