定义:
art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行性能,并且同时支持 NodeJS 和浏览器
下面是一个实例:
我们通过模拟这个data数据是从服务器获取的数据,然后通过template 这个模板引擎渲染出来!
第一步:我们把html基本页面写好。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<script type="text/javascript">
window.onload = function() {
//模拟这个data数据是从服务器获取的数据
//这个数据中有两个字段:一个是title,一个是books
var data = { //data数据
title: '四大名著图书信息',
books: ['三国演义', '水浒传', '西游记', '红楼梦']
};
}
</script>
</head>
<body>
<div id="container">
<h1>标题</h1>
<div>书名1</div>
<div>书名2</div>
<div>书名3</div>
</div>
</body>
</html>
第二步我们在页面中引入template.js文件
第三步我们在页面定义一个模板,我们要注意script里是type="text/html"而不是type=“text/javascript”,而且还要配一个id。如下所示:
我们补充一下这个模板。
这个模板里的标题和书名这些数据就是data片段。
下面是我添加我把代码补充完整。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板引擎</title>
<script type="text/javascript" src="template.js"></script>
<script type="text/html" id="resultTemplate">
<h1>{{title}}</h1> {{each books as value i}}
<div>{{value}}</div>
{{/each}}
</script>
<script type="text/javascript">
window.onload = function() {
//模拟这个data数据是从服务器获取的数据
//这个数据中有两个字段:一个是title,一个是books
var data = { //data数据
title: '四大名著图书信息',
books: ['三国演义', '水浒传', '西游记', '红楼梦']
};
//template根据两个参数生成html片段保存在html里面
//这里也就是把data数据保存到id为resultTemplate的template模板中去。
var html = template("resultTemplate", data); //第一个参数是模板的id,第二个参数是data数据
var container = document.querySelector("#container");
container.innerHTML = html;
}
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
没有把数据data数据渲染出来的效果,
把数据渲染出来后的效果
我逛了很多的网站发现template.js的下载链接都挂了。为了造福广大网友我这里附上一个百度云的下载链接。
链接:https://pan.baidu.com/s/1FOcJehGQCBfdi5fxIJjVnQ
提取码:62in
本文参考:参考黑马程序员的相关知识点。