使用模板引擎的动态渲染

最新推荐文章于 2025-06-28 19:16:07 发布

weixin_44206189

最新推荐文章于 2025-06-28 19:16:07 发布

阅读量3.9k

点赞数

使用模板引擎的动态渲染

一、模板引擎的介绍
模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎可以让（网站）程序实现界面与数据分离，业务代码与逻辑代码的分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。

二、一些常用的模板引擎

art-template
通过art-template官网下载：https://aui.github.io/art-template/zh-cn/index.html
Handlebars
通过Handlebars官网下载: http://handlebarsjs.com/installation.html
通过Github下载: https://github.com/daaain/Handlebars.git
Jade
通过Jade官网下载：http://jade-lang.com/

在这里我是用的是 art-template 作为模板引擎，接下来我将介绍下他的使用方法和注意事项

三、模板引擎的使用步骤

根据项目的需要，选用一个适合的模板引擎
下载模板引擎的 JavaScript 文件
将下载好的模板通过script标签引入到页面中即可
<script type="text/javascript" src='template-web.js'></script>
创建一个写模板
准备模板所需要的数据
通过模板引擎的 JavaScript 提供的函数将模板和数据整合得到渲染结果
将渲染结果添加到页面的元素中

四、模板引擎使用的注意事项

一般我们使用 script 标签将需要的模板包裹起来，script 标签具有以下几个好处
1. script 标签的内容永远都不会显示在界面上。
2. 如果 script 标签中的 type 属性不等于 text/javascript，则标签内部的内容不会作为 JavaScript 执行。
3. script标签中的 id 属性是为后面借用模板引擎 API 渲染数据做准备
<script id='tmpl' type="text/x-art-template"></script>

注意： script 标签中的 type 属性一定不能设置为 text/javascript，我这里设置为text/x-art-template
使用template(filename, content)方法进行渲染模板，其中参数filename为string，content可以为string也可以是一个Object，如果 content 为 Object，则渲染模板并返回 string；如果 content 为 string，则编译模板并返回 function。

五、动态表格渲染的案例

页面中的表格

<body>
	<table id='text'></table>
<body>

将 art-template 模板引擎引入到页面中

<script type="text/javascript" src='template-web.js'></script>

创建一个模板

<script id='tmpl' type="text/x-art-template">
	{{each comments}}
		<tr>
			<td>{{$value.author}}</td>	
			<td>{{$value.telephone}}</td>
			<td>{{$value.E-mail}}</td>
		</tr>
	{{/each}}
</script>

art-template 模板更多的语法规则，请见 art-template 官方文档：https://aui.github.io/art-template/zh-cn/docs/syntax.html

在JS代码中编译模板，将渲染的结果呈现在页面上

<script>
	//  创建一个 XMLHttpRequest 类型的对象
	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
	xhr.open('GET','test.php');
	xhr.send();
	xhr.onreadystatechange = function () {
		if (this.readyState !==4) return;
		var dest = JSON.parse(this.responseText);
		
		// 准备模板所需要的数据
		var context = {comments:dest.data} 
		
		// 借用模板引擎 API 渲染数据
		var html = template('tmpl',context);

		// 将渲染的结果呈现在页面table中
	   document.getElementById('text').innerHTML = html;
	  }