使用art-template模板引擎渲染数据

一:什么是art-template

  • art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码,以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容,如果html内容需要修改,我们需要在js中修改。而用了模板引擎以后,我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。

二:art-template特性

  1. 拥有接近 JavaScript 渲染极限的的性能
  2. 调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader)
  3. 支持 Express、Koa、Webpack
  4. 支持模板继承与子模板
  5. 浏览器版本仅 6KB 大小

三:art-template与其他模板引擎运行速度对比

image

四:关于art-template的一些学习网站

https://github.com/aui/art-template(art-template完整文档)

https://aui.github.io/art-template/zh-cn/index.html(art-template中文文档)

五:安装art-template,有以下2种方式:

  1. 在命令行中使用如下命令
npm install art-template --save

  1. 也可以在浏览器中实时编译,进入链接ctrl+s保存文件至项目目录中:lib/template-web.js(gzip: 6kb这个源码是压缩过的)

六:art-template语法

  • art-template 支持标准语法与原始语法。标准语法可以让模板易读写,而原始语法拥有强大的逻辑表达能力。(例如再使用循环时,标准语法只能使用each循环遍历,而原始语法还可以使用for,while等循环)
  • 标准语法支持基本模板语法以及基本 JavaScript 表达式;原始语法支持任意 JavaScript 语句,这和 EJS 一样。
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法
<% 语句 %>
<% for(var i=0;i <%}>

<%=  表达式 %>
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

<% %><%= %>这个的区别需要注意<% %>这个跟语句,若要跟表达式,则使用<%= %>

七: 定义模板

  • 因为浏览器不支持文件系统,所以 template(filename, data)不支持传入文件路径,它内部使用 document.getElementById(filename).innerHTML 来获取模板,我们则使用定义模板,如下所示:


八:art-template使用示例:

两种定义模板方式用一个就可以了
require(["config"], function(){ require(["jquery", "template", "header", "footer"], function($, template, header){ $.getJSON("http://rap2api.taobao.org/app/mock/25320/api/list", function(data){ const html = template("list_temp2", {list : data.res_body.data}); $(".list_box").html(html); }) }); });

你可能感兴趣的:(使用art-template模板引擎渲染数据)