使用art-template模板引擎渲染数据

1.什么是 art-template?

art-template 是一个简约、超快的模板引擎。

它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。

模板最开始是诞生于服务器领域，后来发展到浏览器。

2.用途

模板引擎可以让（网站）程序实现界面与数据分离，业务代码与逻辑代码的分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。

3.优点

性能接近JavaScript渲染限制

调试友好。语法错误或运行时错误将准确定位在哪一行模板上。支持在模板文件> - 中设置断点（Webpack Loader）

支持Express，Koa，Webpack

支持模板继承和子模板

浏览器版本只有6KB

同时支持 NodeJS 和浏览器

4.art-template 与其他模板引擎的运行速度对比

image.png

使用简单的模板语法，同时支持与EJS模板兼容的原始JavaScript语句

语法对比

5.浏览器如何使用

说明：浏览器中模板引擎不关心字符串内容及格式
只认识 {{ }}，即需要识别出来填充数据的地方

使用方法:
1.安装： npm install art-template
2.<script>引入安装的js包 node_modules/art-template/lib/template-web.js
3.<script> 标签里写自己的模板 type ='text/x-handlebars-template' 而不是 text/javascript 因为对应的解析方式不同
4.给模板里写值 template(' script模板名(id)'，{对象})

语法:
例如:
数据：{{ data}} {{data.name}}
判断：{{if data}} {{data.name}} {{/if}}
一维遍历：{{each data}} {{$value}} {{/each}}
二维遍历：

   {{each data as value}}  //第一次遍历
        {{each value.more as item }}  //第二次遍历data.more
            {{item}} 
        {{/each}}
   {{/each}}

具体如下例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
//导入包
<script src="./node_modules/art-template/lib/template-web.js"></script>

//模板js
<script type="text/x-handlebars-template" id="tp1">
    hello {{name}}
    i am {{age}} years old
    i come from {{province}}
    i like {{each hobbies}} {{$value}} {{/each}}
</script>

//通过id判断是哪个模板，然后写入数据 数据形式对应
<script>
    let res = template('tp1',{
        name:'Jack',
        age:20,
        province:'陕西省',
        hobbies:["eat","sleep","play"]
    });
    console.log(res);
</script>
</body>
</html>

直接运行index.html结果：

控制台输出结果

6.NodeJs如何使用

说明：需要搭建服务器，读取整个页面数据，自动识别页面中的模板数据
通过响应回去的数据，将页面动态补充完整。

使用方法：
1.安装 npm install art-template
2.引入模块 const template = require('art-template')
3.使用：template.render('模板',{对象})方法
4.html文件语法同上

语法如下：

     let result = template.render('hello {{name}}',{
         name:'jack'
     });
     console.log(result);

实例如下：

注意：

默认页面读取到的数据是二进制，render 方法接收的是字符串
需要把读取到的 data二进制数据转换成字符串所以需要toString()方法

将文件中的数据 files 填入页面数据 data 中
文件数据需要是 json 格式，页面则需要是字符串格式

1.服务器代码

const http = require('http');
const template = require('art-template');
const fs = require('fs');
const path = require('path');
http.createServer(function (req,res) {
    //读取页面文件
    fs.readFile(path.join(__dirname,"test.html"),function (err,data) {
        if(err)
            throw err;
       // 读取数据文件
        fs.readFile(path.join(__dirname,"data.json"),function (err,files) {
            if(err)
                throw err;
            let rest = template.render(data.toString(), {
                title: "个人信息",
                data: JSON.parse(files)
            });
            console.log(JSON.parse(files));
            res.end(rest);
        })
    })
}).listen(8080,function () {
    console.log("http://localhost:8080");
});

2.test.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>
   // data 后面 value  代表每一项 ，index 为下标
   {{each data as value  index}}
    <p>hello , i am {{value.name}}</p>
    <p>i am {{value.age}} years old</p>
    <p>i come from {{value.province}}</p>
    <!--遍历二维数组-->
    <p>i like
        {{each value.hobbies as i }} {{i}} ,{{/each}}
    </p>
    <br>
   {{/each}}
</body>
</html>

3.数据data.json文件

[
  {"name":"Jack",
  "age":20,
  "province":"河南省'",
  "hobbies":["eat","music","play"]
  },
  {"name":"Rose",
    "age":18,
    "province":"北京市'",
    "hobbies":["eat","sleep","watch TV"]
  },
  {"name":"Little fairy",
    "age":16,
    "province":"陕西省'",
    "hobbies":["eat","sleep","read book"]
  }]

访问http://localhost:8080运行结果

image.png

总结:

学起来并不是很难，就是遇到些小问题，需要去研究一下，怎么解决。
光看是没有用的，需要动手去做，才知道哪里不对，哪里该怎么写，哪里容易出问题。
加油，实践出真知呀。