前端蜗牛

adeng.y个人博客


模版渲染引擎·art-template.js

发布时间:2018-08-15 作者:阿灯 阅读量:188

art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。

官网:https://github.com/aui/art-template



核心方法:

// 基于模板名渲染模板
template(filename, data);


// 将模板源代码编译成函数
template.compile(source, options);


// 将模板源代码编译成函数并立刻执行
te mplate.render(source, data, options);


语法:


输出语法

{{value}} {{data.key}} {{data['key']}} {{a ? b : c}} {{a || b}} {{a + b}}
<%= value %> <%= data.key %> <%= data['key'] %> <%= a ? b : c %> <%= a || b %> <%= a + b %>


条件表达

{{if value}} ... {{/if}} {{if v1}} ... {{else if v2}} ... {{/if}}
<% if (value) { %> ... <% } %> <% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>


循环

{{each target}}  {{$index}} {{$value}} {{/each}}
<% for(var i = 0; i < target.length; i++){ %>  <%= i %> <%= target[i] %> <% } %>


变量

{{set temp = data.sub.content}}

<% var temp = data.sub.content; %>


模版继承

{{extend './layout.art'}} {{block 'head'}} ... {{/block}}

<% extend('./layout.art') %> <% block('head', function(){ %> ... <% }) %>


子模板

{{include './header.art'}} {{include './header.art' data}}

<% include('./header.art') %> <% include('./header.art', data) %>

data 数默认值为 $data;标准语法不支持声明 object 与 array,只支持引用变量,而原始语法不受限制。


项目使用:


引入template.js

基于模版名渲染

var _html = template.render('J_tplDialog', {type : type});  // 第一个参数为模版名ID,第二个为对象数据

$(‘.demo’).html(_html);   //把渲染内容插入元素标签


art-template.js下载



标签云

© adeng.y 粤ICP备17049299号
Catfish Blog | 后台