模板引擎 art-template

前言

当我们成功的使用 Ajax 获取到服务器返回给我们的数据后，这个时候我们就需要将这些数据渲染到用户界面上去

通常采取的方式我们是将 html 代码和数据进行字符串的拼接，然后再将其添加到用户界面上去，但是当我们如果需要拼接的数据和 html 过多时，那么我们再使用这种字符串拼接的方法，可能会非常容易的出现错误，即使没有出现错误，那么当我们某天想要修改它时，那么也将会变得非常不方便，那么我们应该如何解决这个问题呢？

模板引擎的作用

没错，这个时候我们就可以借助模板引擎来解决这个问题，那么大概的总结一下模板引擎的作用

1.使用模板引擎可以更好的帮助我们对数据和 html 进行拼接，并且使我们的代码更易维护

2. 使用模板引擎能够使用户界面的数据拼接和 JavaScript 业务逻辑分离，增加程序的可扩展性。

3. 使用模板引擎可以提高开发效率。

简单举例

使用的模板引擎是 art-template

先举一个简单使用的例子

<!-- 导入要使用的模板引擎 -->
<script src="./js/template-web.js"></script>
<!-- 对数据和字符串进行拼接 -->
<script type="text/html" id="tpl">
  <div>
    <span>{{name}}</span>
    <span>{{age}}</span>
    </div>
</script>
<!-- js代码 -->
<script>
  // 将特定模板与特定数据进行拼接
  const html = template('tpl', {
    name: '张三',
    age: 20
  });
  console.log(html);
</script>
           

模板语法

模板语法的作用是告诉模板引擎数据和模板要如何进行拼接

输出

将数据显示在模板中

<h2>{{value}}</h2>
 // 模板可以对要显示的数据进行运算（加减乘除、三目运算等）
 <h2>{{a ? b : c}}</h2>
 <h2>{{a + b}}</h2>
           

原文输出

如果数据中携带 html 标签，默认情况下，模板引擎不会解析标签，会将其转义后原文输出

但是如果想要原文输出的话，则可以使用

@ value

条件判断

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

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

循环

{{each target}}
	 //下标，值
     {{$index}} {{$value}}
 {{/each}}
           

导入模板变量

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

template.defaults.imports.变量名 = 变量值;
// 全局作用域下的变量才可以使用这个方法，否则访问不到这个变量
$imports.变量名称
           

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

除了上面这种写的标准语法之外，还有一种原始语法，具体的使用方法传送门

上面的是客户端的，下面简单的介绍下服务器端如何使用

// 导入模板引擎
const template = require('art-template');  
const path = require('path');
//index.art：简单点来说就是讲index.html的后缀改为 .art
// html模板
let pathname = path.join(__dirname, 'views', 'index.art');
let data = {
  name: '张三',
  age: '19',
  code: '<h2>外在生活（人设），内在生活（人品）</h2>'
};
//将数据与模板进行拼接
let html = template(pathname, data);
console.log(html);