9.模板引擎

2021-10-16 17:00:17 阅读：146 来源： 互联网

标签：script html value 引擎 template each var 模板

介绍

art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。在线速度测试。
通过跨域/ajax获取到数据后通过模板引擎方便遍历成html片段

安装

1.npm

npm install art-template --save

2.源代码

template-web.js
在html中引入:

<script src="template-web.js" type="text/javascript" charset="utf-8"></script>

使用基本步骤

1.创建type="text/html"的script标签;

<script type="text/html">
	
</script>

2.添加id名称

<script type="text/html" id="temptest">
	
</script>

3.template()方法获取html片段;

template("id名称",对象名称)

基本语法

得到数据中的数据

{{value}}

循环操作

{{each result as value i}}
	
{{/each}}

转义

#的使用{{#value}}

条件判断

{{if xxx}}
{/if}

例子

1.输出一维数组

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>IE</title>
		<script src="template-web.js"></script>
	</head>
	<body>
		<div id="content"></div>
		<script id="test1" type="text/html" charset="utf-8">
			{{if Test}}
				<h1>{{title}}</h1>
				<ul>
					{{each list as value i}}
					<li>{{i}}{{value}}</li>
					{{/each}}
				</ul>
			{{/if}}
		</script>
		<script>
			var data = {
				title: '基本例子',
				Test: true,
				list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
			};
			var html=template('test1',data);
			document.getElementById('content').innerHTML = html;
		</script>
	</body>
</html>

2.输出二维数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨域基本步骤</title>
		<script src="../a11_模板引擎/template-web.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="box">
			<input type="text" name="" id="keywords" value="" placeholder="请输入关键字" />
			<input type="button" class="btn" name="" id="" value="查询" />
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>
		</div>
	</body>
	<script type="text/html" id="temptest">
	<!-- 1.创建type="text/html"的script标签;2.添加id名称;3.template("id名称",对象名称)方法获取html片段; -->
		{{each result as value i}}
		<li>{{value[0]}}</li>
		{{/each}}
	</script>
	<script type="text/javascript">
		window.onload = function() {
			var btn = document.querySelector(".btn");
			var ulbox = document.querySelector(".box ul");
			btn.onclick = function() {
				var keywordVle = document.querySelector("#keywords").value;
				// 1.动态创建script标签
				var script = document.createElement("script");
				// 2.获取地址
				script.src = "http://suggest.taobao.com/sug?code=utf-8&q=" + keywordVle + "&callback=test";
				// 3.回调
				window["test"] = function(data) {
					console.log(data);
					var html=template("temptest",data);
					console.log(html);
					 ulbox.innerHTML = html;
				}; 
				var head = document.querySelector("head");
				head.appendChild(script);
			}
		}
	</script>
</html>

标签：script,html,value,引擎,template,each,var,模板
来源： https://www.cnblogs.com/mywifeisMsHu/p/15414591.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9