Web/06-JavaScript异步编程:Ajax和Promise/模板引擎.md
2021-07-29 11:08:52 +08:00

137 lines
2.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 认识Web和Web标准
publish: false
---
<ArticleTopAd></ArticleTopAd>
## 模版引擎
### 引入
我们在使用ajax请求数据时返回的如果是一个 JSON 格式的字符串我们需要将其包装到对应的HTML代码中再添加到页面上才能看到效果那么这个包装得过程有没有简单的方法呢?
假设在 js 中有如下数据
```javascript
var obj = {
name:"fox",
age:18,
skill:"卖萌"
};
```
希望包装为:
```html
<ul>
<li>姓名:fox</li>
<li>年龄:18</li>
<li>爱好:卖萌</li>
</ul>
```
我们可以通过模板插件来实现
### 模版插件的原理
我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?
### 常见的模板引擎
- BaiduTemplate(百度开发)
- ArtTemplate(腾讯开发)[GitHub地址](https://github.com/aui/art-template)、[文档地址](https://aui.github.io/art-template/zh-cn/docs/)。
- velocity.js(淘宝开发)
- Handlebars
## ArtTemplate
标准语法
```html
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
```
渲染模板
```javascript
var data = {
title: `标签`,
list: [`文艺`, `博客`, `摄影`]
};
var html = template(`test`, data);
document.getElementById(`content`).innerHTML = html;
```
举例
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/template-native-debug.js"></script>
<script src="js/jquery-2.2.0.js"></script>
<script id="tpl" type="text/html">
<h3><%= className %></h3>
<ul>
<% for(var i = 0; i< students.length;i++) { %>
<li><%= i+1 %>. <%= students[i] %></li>
<% } %>
</ul>
</script>
<script>
var data = {
className:"前端1期",
students:["张飞","刘备","诸葛亮","甄姬","小乔","汪汪"]
};
$(function (){
var html = template("tpl",data);
$("#demo").html(html);
})
</script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
```
效果
![](http://img.smyhvae.com/20180301_1223.png)