腾讯art-template4,即vue后又获一利器

腾讯art-template4,即vue后又获一利器

art-template是一个简约、超快的模板引擎,官方给出的优点及特性是:

1.拥有接近 JavaScript 渲染极限的的性能

2.调试友好:语法、运行时错误日志精确到模板所在行;支持在模板文件上打断点(Webpack Loader

3.支持 ExpressKoaWebpack

4.支持模板继承与子模板

5.浏览器版本仅 6KB 大小

其中第2点看出来不错哦,支付打断点,其它几个优点见仁见智。

首先了解一下框架工作流程,大致可以分为两步:编辑模板和渲染模板。

编辑模板就是将需要动态生成的DOM抽象成为模板,渲染则是利用渲染函数,把后端返回的数据 填入模板中相应的位置上,生成最终的html串并且回填到html页面的指定位置中。

 

下面开始学习这旅吧。

1.先去网络或github上去下载art-template.js文件,然后在htmljsp里引入文件即可以使用



2.学习一个框架,从3点开始下手

第一:数据怎么展示

第二:数据怎么提供

第三:数据怎么生效。

2.1 第一:数据怎么展示:

ArtTemplate提供2种语法

1.标准语法或叫做极简语法,使用的是双大括号或者叫“胡子”,推荐使用,看起来简洁

{{if data}}
  

{{data.name}}

{{/if}}


只将数据放到胡子,其它标签安jsphtml语法写

2.原始语法,<%%>

<% if (data) { %>

  

<%= data.name %>

<% } %>


使用jsp的语法,我们知道”<%%>”里是可以写java代码的,可以定义局部变量和java代码语句。把数据和逻辑那块放到<%%>里写,其它按正常的逻辑写,类似写jsp。缺点是看起来不整洁,特别是页面复杂的,优点是拥有强大的逻辑表达能力

 

3.双大括号或胡子里可以使用的逻辑符包括.”[]”,”三目运算符”,”||&”,”逻辑运算符”。如下:

{{value}}

{{data.key}}

{{data['key']}}

{{a ? b : c}}

{{a || b}}

{{a + b}}

例子如下:





basic-demo









渲染出来的结果:

腾讯art-template4,即vue后又获一利器_第1张图片

1).红色部分是我们特别关注的地方,强调一点,这里的模块指的是用



包裹的部分。胡子和标签都在里面写,脚本视做一个模块。

2).胡子里可以使用指定的操作符,如逻辑判断有运算符,如果不足够,可以使用原始语法,那里逻辑运算比较全面。

3).让渲染出来的元素在页面上生效。

var html = template('test', data);

document.getElementById('content').innerHTML = html;



4.条件判断

{{if value}} ... {{/if}}

{{if v1}} ... {{else if v2}} ... {{/if}}

所以取数据和逻辑判断都在胡子里。例子:





basic-demo








结果如下:

腾讯art-template4,即vue后又获一利器_第2张图片

看红色部分,以{{if value}}开头,以{{/if}}结尾,中间可以有else if。可以做到java

if(value){

}else if(value){

}else if(value){

}



5.模拟forforeach逻辑。如上面的例子:

    {{each list value i}}
  • 第{{i + 1}}门课 :{{value}}
  • {{/each}}



6.设置变量:{{set temp = value}}

例如:





basic-demo









7.过滤器

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};

template.defaults.imports.timestamp = function(value){return value * 1000};

使用{{value|filter}}

使用类似管道符来传递数据,数据会传递到定义的过滤器函数filter





helper-demo




自定义过滤器




结果如下

腾讯art-template4,即vue后又获一利器_第3张图片

第一种方式是直接使用方式,通过管道符将数据拿到过滤器里,第二种方式是函数方式,我们知道,模板通过 $imports可以访问到模板外部的全局变量与导入的变量,我们可以使用$import直接方式通过template.defaults.imports导入的函数或变量,也可以访问全局的函数或变量,注意是全局的,所以通过$imports可以直接调用方法或变量,所以,有第3个例子,通过$imports模板变量访问了没导入但是是全局的test函数。


art-template.js提供了如下几种内置变量:

1.$data 传入模板的数据,如上数据可以$data.math访问到数学分数是多少

2.$imports外部导入的变量以及全局变量,(重要,重点,重量,重要的事说3遍,还不带重的)

3.print 字符串输出函数,后面可根随机个值,然后将拼接的字符串打印出来,比如如上数据:

print函数:print name "的数学是"  math ",英文是" english  ",总分是" {{math + english}}

结果如下:



4.include子模板载入函数

5.extend模板继承模板导入函数

6.block 模板块声明函数


第二:数据怎么提供

我们知道js里提供数据常用json格式,数据怎么提供的问题涉及到art-template2种渲染方式。

第一种直接提供模板名和数据源渲染,再将渲染后的模板页面添加到jsp里某个dom元素里。使用template(“filename”,content)

Filename:模板名,如上面script脚本id,或者单独抽出来的子模板路径,

Content:如果提供的是object,一般当做提供的是json格式数据,那么template方法会渲染模板将以string形势返回渲染后的结果,最张将返回的string添加到dom元素上。

如果 contentstring,则编译模板并返回function

一般使用方式是var html = template('testP', data);然后将返回的字符串html插入到dom元素上document.getElementById('content').innerHTML = html;

 

第二种。以字符串形势提供模板,调用 compile或者render编译模板,然后将数据提供给模板。注意以字符串形势提供的模板严格来讲并不是”模板“,必需经过编译才行。例如:

var source = '
    ' + '{{each list value i}}' + '
  • 索引 {{i + 1}} :{{value}}
  • ' + '{{/each}}' + '
'; var data = { list: ['摄影', '电影', '民谣', '旅行', '吉他'] } var render = template.compile(source); var html = render(data);



结果:腾讯art-template4,即vue后又获一利器_第4张图片

compile(source, options)编译模板并返回一个渲染函数。先编译再提供数据

或者编译和提供数据放一起

var render = template.render(source,data);

document.getElementById('content').innerHTML = render;

结果同上。

 

所以:

template(filename, content)

compile(source, options)

render(source, data)

即是提供数据和让数据怎么生效的三种方式。这也解释了第三个问题数据怎么生效

第三:数据怎么生效

见第二解答。


高级用法include函数,

{{include '模板id'}}

{{include '模板id' data}}

data 数默认值为$data,也可赋值,指定数据源

例子:





结果如下:

腾讯art-template4,即vue后又获一利器_第5张图片


模板idtest使用Includ函数包裹了一个模板idlist的模板。虽然显示出来了,但这里有个坑。所以模板都必需写在同一个htmljsp里,不同模板可以写在不 同的

你可能感兴趣的:(art-template,前端框架)