html5模板引擎渲染,使用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.

3.

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}}

具体如下例：

{{title}}

//导入包

//模板js

hello {{name}}

i am {{age}} years old

i come from {{province}}

i like {{each hobbies}} {{$value}} {{/each}}

//通过id判断是哪个模板，然后写入数据 数据形式对应

let res = template('tp1',{

name:'Jack',

age:20,

province:'陕西省',

hobbies:["eat","sleep","play"]

});

console.log(res);