art-template整理

官网介绍：art-template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能。同时，它同时支持NodeJS和浏览器。在线速度测试。
理解
在使用js进行前端开放的时候，除了DOM节点的操作以外还有通过json数据的操作。而操作最麻烦的就是使用json生成dom对象，通常要写很多的for循环，if判断之类的代码来支持data向view的转化，十使用模块引擎，可以很大程度上简化这个过程。
作用
使用模板引擎提供的模块语法，可以将数据和HTML拼接起来。

浏览器中编译

安装

1.复制内容保存在js文件中
2.

<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>

使用步骤

1.下载好的art-template模板引擎引入在 HTML 页面中
2.准备 art-template 模板，模块script标签 src 属性为 text/html 或者 text/template 和 id
3.使用模块引擎渲染数据
4.使用模板语法将数据和html进行拼接。
5.将拼接好的html字符串添加到页面中。

**例子： **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.存放在本地的js文件 -->
		<!-- <script src="template-web.js"></script> -->
		<!-- <script src="art-template.js"></script> -->
		<!-- 外链 -->
		<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
	</head>
	<body>
		<div id="box">	
		</div>
		<!-- 2.准备 art-template 模板，**模块script标签 src 属性为 text/html 或者  text/template  和 id** -->
		<!--  4.使用模板语法将数据和html进行拼接。 -->
		<script type="text/template" id="temp">
			{{name}}---{{age}}
		</script>
		</script>
		<!-- js代码 -->
		<script type="text/javascript">
			// 模拟json数据
			var data = 	{name:'zhangsan',age:18};
			// 3.使用模块引擎 template函数渲染数据。
			// 参数1：模板的 id 
			// 参数2：数据对象或者数组
			var temp = template('temp',data);
			// 5.将拼接好的html字符串添加到页面中。
			var box = document.getElementById('box');
			box.innerHTML = temp;
		</script>
	</body>
</html>

在这里插入图片描述

模板语法使用

按照上面的例子,主要以第 3 步传值的不同和模板语法来说明.

// 3.使用模块引擎 template函数渲染数据。
// 参数1：模板的 id 
// 参数2：数据对象或者数组
var temp = template('tem',object);

模块语法格式

标准语法: {{ 语句 }}
元素语法: <% 语句 %>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.存放在本地的js文件 -->
		<!-- <script src="template-web.js"></script> -->
		<!-- <script src="art-template.js"></script> -->
		<!-- 外链 -->
		<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
	</head>
	<body>
		<div id="box">	
		</div>
		<!-- 2.准备 art-template 模板，**模块script标签 src 属性为 text/html 或者  text/template  和 id** -->
		<!--  4.使用模板语法将数据和html进行拼接。 -->
		<script type="text/template" id="tem">
			<!-- 0 20 100 1 加减乘除字符串拼接-->
			{{10 - 10}} 
			{{10 + 10}} 
			{{10 * 10}} 
			{{10 / 10}} 
			{{10 + '10'}} 
			 
			<!--
			输出全部内容
			直接输出 datalist 以字符串的形式完整输出,结果  {"name":"sadas"} 
			加 @ 符输出 @datalist 输出值类型数据,结果  [object Object]
			-->
			{{datalist}} 
			{{@datalist}}
			
			<!-- 条件运算 -->
 			{{true ? 'ok' : 'no'}}
			
			<!-- 或运算 -->
			{{1 || 0}}
			
			<!-- 定义变量 -->
			{{set item = 'hello'}},
			<!-- 使用变量 -->
			{{item}}
		</script>
		<!-- js代码 -->
		<script type="text/javascript">
			// 模拟json数据
			var data = {name:'zhangsan'}		
			// 3.使用模块引擎 template函数渲染数据。
			// 参数1：模板的 id 
			// 参数2：数据对象或者数组
			var temp = template('tem',{datalist:data});
			// 5.将拼接好的html字符串添加到页面中。
			var box = document.getElementById('box');
			box.innerHTML = temp;
		</script>
	</body>
</html>

基础语法----基本渲染

例子

var obj = {name:'zhangsan',age:18};// 参数为一个对象
var temp = template('temp',obj);

模板

<script type="text/html" id="temp">
	{{name}}---{{age}}
</script>

结果
结果
使用 {{属性名}} 的方式可以直接对象把属性的值渲染 .

基础语法----循环遍历

遍历语法: {{each}} 代码块 {{ /each }}
$value: 获取当前元素(数组的某一项) ,如果元素是一个对象通过 $value.属性名 来获取属性值
$index: 获取元素(数组的某一项) 的下标 .

例子

// 模拟json数据
var data = [
	{id:1,name:'张遂',age:18,sex:1,qq:123456},
	{id:2,name:'李某人',age:21,sex:0,qq:4561234},	
	{id:3,name:'王大仙',age:23,sex:1,qq:4561234},	
	{id:4,name:'刘花姐',age:23,sex:0,qq:123},	
]		
var temp = template('tem',data);

模板

<script type="text/template" id="tem">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<th>id</th>
			<th>name</th>
			<th>age</th>
			<th>sex</th>
			<th>qq</th>
		</tr>
		{{ each }}
			<tr>
				<td>{{$value.id}}---{{$index}}</td>
				<td>{{$value.name}}</td>
				<td>{{$value.age}}</td>                    
				<td>{{$value.sex}}</td>        
				<td>{{$value.qq}}</td>
			</tr>
		{{ /each }}
	</table>
</script>

结果:加了一点点css样式
在这里插入图片描述
如果传递的参为数组 each 内就只能使用上面默认的方式获取内容,如果是一个对象,然后数据作为对象的一个属性值,遍历的是该对象的某个属性里面的数据,这样可以设置自定义的获取方式

例如: 第二个参数的方式改为 { 属性 : data }

// 模拟json数据
var data = [
	{id:1,name:'张遂',age:18,sex:1,qq:123456},
	{id:2,name:'李某人',age:21,sex:0,qq:4561234},	
	{id:3,name:'王大仙',age:23,sex:1,qq:4561234},	
	{id:4,name:'刘花姐',age:23,sex:0,qq:123},	
]		
var temp = template('tem',{ datalist:data });

模板:循环体改进 {{each datalist item index}} 代码块 {{/each}}

<script type="text/template" id="tem">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<th>id</th>
			<th>name</th>
			<th>age</th>
			<th>sex</th>
			<th>qq</th>
		</tr>
		{{each datalist item index}}
			<tr>
				<td>{{item.id}}---{{index}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td>{{item.sex}}</td>
				<td>{{item.qq}}</td>
			</tr>
		{{/each}}
	</table>
</script>

结果
在这里插入图片描述
现在是遍历对象 each 的获取方式可以自定义,不设置还是使用默认的方式.
datalist :表示遍历的数据.
item :表示某一个数据.
index:表示下标.

基础语法----if条件

语法:
1.{{if 条件判断}} 为真的代码块 {{else}} 为假的代码块 {{/if}}
2.
{{if 条件判断1}}

   条件判断1为真的代码块

{{else if 条件判断2}}

   条件判断2真假的代码块
…
{{else}}

   为假的代码块

{{/if}}

遍历渲染的数据还没有完全处理好,sex 0和1表示女和男或者男和女,需要使用条件判断来处理.

模板:添加条件判断

<script type="text/template" id="tem">
<table cellpadding="0" cellspacing="0">
		<tr>
			<th>id</th>
			<th>name</th>
			<th>age</th>
			<th>sex</th>
			<th>qq</th>
		</tr>
		{{each datalist item index}}
			<tr>
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td>
					{{if item.sex == 0}}
						<span>男</span>
					{{else}}
						<span>女</span>
					{{/if}}
				</td>
				<td>{{item.qq}}</td>
			</tr>
		{{/each}}
	</table>
</script>

结果
在这里插入图片描述
现在就能正确的显示内容了
是 if else 格式还可以使用 条件运算符(三元运算) ? :
条件改为

<td>
<!-- {{if item.sex == 0}}
	<span>男</span>
{{else}}
	<span>女</span>
{{/if}} -->
{{item.sex == 0 ? '男':'女'}}
</td>

模板继承

…待续

版权声明：本文为yuan_xiao_long原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。