一篇文章让你了解什么是art-template模板引擎

Posted 2021-10-03 小hu同学

目录

• 1、模板引擎
• • 1.1 以前的项目存在的问题
  • 1.2 模板引擎的作用
  • 1.3 模板引擎渲染
• 2、模板语法
• • 2.1 输出
  • 2.2 原文输出
  • 2.3 条件判断 if else
  • 2.4 循环
  • 2.5 导入模板变量

1、模板引擎

art-template是由腾讯出品的一款比较流行的模板引擎，易上手
art-template官网
atr-template文档

1.1 以前的项目存在的问题

1. 数据和html标字符串拼接导致，代码混乱，拼接容易出错，不易维护
2. 业务逻辑和数据界面混合，代码容易出错

且字符串拼接中 不能换行 要是换行的话 需要 ‘\\’ 来转义字符

for(var i = 0; i<res.length;i++){
	html + = '<h1 οnclick="say">你好,'+ name'+' 我今年 '+age'岁</h1>'
}

1.2 模板引擎的作用

1. 使用模板引擎提供的模板语法可以是数据和HTML字符串拼接的更加美观，代码易于维护
2. 模板引擎能够是用户界面的数据拼接和javascript业务逻辑分离，增加程序的可扩展性。
3. 使用模板引擎可以提供开发效率

<h1>你好,{{name}},我今年{{age}}岁了</h1>
<ul>
//循环数据
{{each}}
	<li>{{$value.hob}}</li>
{{/each}}
<ul>

1.3 模板引擎渲染

<!--原文件到官网下载-->
  <div id="contem"></div>
  
    <script src="js/template-web.js"></script>
    <script type="text/html" id="tpl">
    <div>
        <span>姓名:{{name}}</span>
        <span>年龄：{{age}}</span>
    </div>
    </script>

//将特定的模板与数据进行拼接
//这里的tpl 是上述代码中设置的id
<script>
        var data ={
            name:'李四',
            age:20
        }
        //告诉模板引擎将ID为tpl的模板和data数据对象进行拼接
     var html = template('tpl',data);
     //DOM操作将拼接好的字符串放在 id为contem的盒子里面
        document.getElementById('contem').innerHTML = html
    </script>

2、模板语法

art-template 提供了一些模板语法来给我们使用，极大的方便了我们

2.1 输出

<h1>{{a+b}}</h1>
<h1>{{a ? b : c}}</h1>

2.2 原文输出

如果数据中携带了HTML标签时，模板不会将HTML标签进行解析，如果需要解析 请在 前面添加 @

<h1>{{@ value}}</h1>

代码示例：沿用上面的代码

<div>
			<!-- 如果需要解析则要添加 @ 原文输出b标签-->
        <span>姓名:{{@ name}}</span>
        <span>年龄：{{age}}</span>
    </div>

//这里我们给李四加了一个b标签，默认的是不会解析的
 var data ={
            name:'<b>李四</b>',
            age:20
        }

两种情况：

2.3 条件判断 if else

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

{{if 条件}}
	<div>条件成立 显示我</div>
{{else}}
	<div>条件不成立 显示我</div>
{{/if}}

代码示例：沿用之前的代码

<script type="text/html" id="tpl">
    <div>
        <span>姓名:{{@ name}}</span>
        <span>年龄：{{age}}</span>
    </div>
   //判断模板里面的age  是否大于18岁  是的话  就显示大于18
    {{if age>18}}
    <div>大于18岁</div>
    //否则就显示小于18
    {{else}}
        <div>小于18岁</div>
    {{/if}}
    </script>

 var data =
         {
            name:'<b>李四</b>',
            age:12
        }

2.4 循环

//这里的data是你要循环的数据源
{{each data}}
		//index 代表的是 循环到的索引 （固定的）
     {{$index}} 
       //value  代表的是 循环到的数据 （固定的）	
     {{$value}}
 {{/each}}

代码示例：

<div id="contem"></div>
    <script src="js/template-web.js"></script>
    <script type="text/html" id="tpl">
    <div>
        <ul>
   //使用each  来循环li  data数组中有多少个对象就会生成多少li
           {{each data}}
           //通过$value.name的方法来获取到 name 和age
            <li><span>姓名:{{$value.name}}</span></li>
            <li><span>年龄：{{$value.age}}</span></li>
            {{/each}}
    </ul>
    </div>

    </script>

我这里在模板中给了一个数组data ，里面有多个对象

<script>
        //告诉模板引擎将ID为tpl的模板和data数据对象进行拼接
        var html = template('tpl', {
            data: [{
                name: '李四',
                age: 12
            },
            {
                name: '李四2',
                age: 13
            },
            {
                name: '李四3',
                age: 14
            }]
        })
        document.getElementById('contem').innerHTML = html
    </script>

2.5 导入模板变量

类似场景： 当前的时间是不易于客户体验的，有时候我们需要处理好后，在展示出来

<div>$imports.dataFormat(time)</div>

template.defaults.imports.变量名 = 变量值;
$imports.变量名称

function dateFormat（未格式化的原始时间）{
    return '已经格式化好的当前时间'
}
template.defaults.imports.dateFormat = dateFormat;

这样的一个时间会极大的影响客户体验的，需要转换成年月日的形式

代码示例：

 <div id="contem"></div>
    <script src="js/template-web.js"></script>
    <script type="text/html" id="tpl">
    <div>
     <p>当前时间是：{{$imports.dateformat(date)}}</p>  
    </div>
    </script>

<script>
	window.onload =function(){
 	
 	var html = template('tpl'{
 	})
}
</script>