介绍
- 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>