art-template模板引擎基本概念

1.1模板引擎

模板引擎是第三方模块。

让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。

// 未使用模板引擎的写法
 var ary = [{ name: '张三', age: 20 }];
 var str = '<ul>';
 for (var i = 0; i < ary.length; i++) { 
    str += '<li>\
        <span>'+ ary[i].name +'</span>\
        <span>'+ ary[i].age +'</span>\
    </li>';
 }
 str += '</ul>'; 
​
<!-- 使用模板引擎的写法 --> 
 <ul>
    {{each ary}}
        <li>{{$value.name}}</li>
        <li>{{$value.age}}</li>
    {{/each}}
 </ul>
​

 

1.2 art-template模板引擎

在命令行工具中使用npm install art-template命令进行下载

使用const template = require ('art-template' )引入模板引擎

告诉模板引擎要拼接的数据和模板在哪const html = template( '模板路径’,数据);

使用模板语法告诉模板引擎,模板与数据应该如何进行拼接

1.3art-template3代码示例

// 导入模板引擎模块
 const template = require('art-template');
 // 将特定模板与特定数据进行拼接
 const html = template('./views/index.art',{
    data: {
        name: '张三',
        age: 20
    }
 }); 
​

<div>
    <span>{{data.name}}</span>
    <span>{{data.age}}</span>
 </div>
​