title: 认识Web和Web标准
publish: false


模版引擎

引入

我们在使用ajax请求数据时,返回的如果是一个 JSON 格式的字符串,我们需要将其包装到对应的HTML代码中,再添加到页面上,才能看到效果。那么这个包装得过程有没有简单的方法呢?

假设在 js 中有如下数据:

var obj = {
name:"fox",
age:18,
skill:"卖萌"
};

希望包装为:

<ul>
<li>姓名:fox</li>
<li>年龄:18</li>
<li>爱好:卖萌</li>
</ul>

我们可以通过模板插件来实现。

模版插件的原理

我们定义一段文本作为模板,读取文本,使用特殊的符号<%= 属性名 %>,通过正则表达式找到这些特殊的符号进行替换,是不是就实现了这样的效果呢?

常见的模板引擎

  • BaiduTemplate(百度开发)

  • ArtTemplate(腾讯开发):GitHub地址文档地址

  • velocity.js(淘宝开发)

  • Handlebars

ArtTemplate

标准语法:

{{if user}}
<h2>{{user.name}}</h2>
{{/if}}

渲染模板:

var data = {
title: `标签`,
list: [`文艺`, `博客`, `摄影`]
};
var html = template(`test`, data);
document.getElementById(`content`).innerHTML = 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>

效果: