artTemplate 学习笔记

迈不过友情╰ 2022-05-25 00:56 197阅读 0赞

artTemplate  ------ JavaScript模板引擎。

##### 快速上手 #####

> 1、下载artTemplate.js 文件并在页面中引入，下载地址：[点击打开链接][Link 1] 
> 
> 2、在HTML文档中添加一个type="text/html"的script标签 存放模板。

> 3、在js文件中实现模板的渲染

var data={
    title:"类别",
    list:["插花","茶艺","摄影","击剑"]
    };
    var html=template("test",data);
    document.body.innerHTML=html;

##### 模板语法 #####

> 有简洁语法和原生语法两种，推荐使用简洁语法。

*   *  可以直接使用传过来的data中的属性和值
     *  简洁语法使用" \{ \{\}\} " 将表达式包裹起来（使用\{ \{\}\} 包裹起来的语句成为表达式）
     *  语句结束时必须有结束标签\{ \{/xxx\}\}

> 简洁语法的书写方式

> 1、遍历，数据或者对象都可使用each遍历

{
       {each list as value index}}
        <p>{
       {index}}:{
       {value}}
    {
       {/each}}

> 2、if 判断

{
       {if max>=10}}
       <p> max的值大于等于10 </p>
    {
       {else}}
       <p>max的值小于10</p>
    {
       {/if}}

{
       {if max>10}}
        <p>max大于10</p>
    {
       {else if max=10}}
        <p>max等于10</p>
    {
       {else}}
        <p>max小于10</p>
    {
       {/if}}

> 3、表达式的输出

> > 对内容编码输出  ：\{ \{content\}\}
> 
> > 对内容不进行编码，直接输出\{ \{\#content\}\}
> 
> > 编码可以防止数据中含有HTML字符串，避免引起XSS攻击

> 4、嵌入其他模板

> > \{ \{include “template\_name”\}\}

##### artTemplate提供的一些方法 #####

> 1、template(id,data)

> >    id：模板id , artTempalte内部会根据document.getElementById(id)来查找模板。
> 
> >    data：数据

var html=template("demo",data);
    document.body.innerHTML=html;

> 2、template.compile(source,option)

> >     source: 必选参数，模板内容
> 
> >     option:一般不传

> > 使用template.compile()方法 时， 模板是JavaScript拼接而成的。  而template()方法则是在script标签中实现模板，这种方法更为简洁。

> > template.render(source,option) 和 template.compile() 的使用时一致的。
> 
> 3、complate.helper(name,callback)， 用于实现一些公用的辅助方法
> 
>     比如像是修改数据格式，修改数据的精确度之类  都可以借助complate.helper()
> 
>     HTML部分
>     <div>{
>         {str | daxie}}</div>
>     
>     complate.helper()实现
>     
>     complate.helper("daxie",function(str){
>       str=str.toUpperCase();
>       return str;
>     });
> 
>   
>

[Link 1]: https://github.com/aui/art-template