template.js模板引擎下载和实例

定义:
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

本文参考:参考黑马程序员的相关知识点。

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值