文章目录
-
- 模板引擎art-template
-
- 1. 简洁语法结构
- 2. 原生JS语法结构
- 3. 核心方法
- ☆
模板引擎art-template
（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。模板引擎
- art-template是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。由腾讯公司研发的，市面上有很多类似的模板引擎技术，但是这个应用相对较多。
- 优点： 执行效率高，兼容所有浏览器，使用方便。
- 有两种语法形式：
- 简洁语法结构。
类似 vue, angularjs, freemarker,valocity;
- 原生JavaScript语法结构。 类似
jsp;
- art-template
1. 简洁语法结构
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>简洁语法结构</title>
<style>
</style>
<script src="art-template/template.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var data = {"name": "喵喵", "age": "17", "hobby": ["哈哈", "嘻嘻", "啦啦"]};
var str = template("art1", data);
$("#container").html(str);
});
</script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="art1">
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<ul>
{{each hobby as value i}}
<li>{{i+1}}{{value}}</li>
{{/each}}
</ul>
</script>
</body>
</html>
2. 原生JS语法结构
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>原生js语法结构</title>
<style>
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
</style>
<script src="art-template/template-native.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var data={"name":"喵喵","age":"17","hobby":["哈哈","嘻嘻","啦啦"]};
var str = template("art1",data);
console.log(str);
$("#container").html(str);
});
</script>
</head>
<body>
<div id="container"></div>
<script type="text/html" id="art1">
<!--template 错误是因为喵喵少了"" 也就是模板错误，检查模板格式 调试代码方法：通过小范围复制源代码来查看代码出错的区域-->
<% if(name=="喵喵"){ %>
<h2><%=name%></h2>
<h2><%=age%></h2>
<ul>
<% for(var i=0;i< hobby.length;i++){ %>
<li><%=i+1%><%=hobby[i]%></li>
<%}%>
</ul>
<%}%>
</script>
</body>
</html>
3. 核心方法
// 基于模板名渲染模板
template(filename, data);
// 将模板源代码编译成函数
template.compile(source, options);
// 将模板源代码编译成函数并立即执行
template.render(source, data, options);
- 官方文档：http://aui.github.io/art-template/docs/
- 了解一下即可，使用的时候再来学习。
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)