使用模板引擎可以解决问题，代码的偶合度，代码的修改与维护。
模板引擎：把数据转成html格式的字符串 使用原生语法
官网
使用方法：
1.下载导入
2.创建模板
<script type="text/template" id='模板id名'></script>
或<script type="text/html" id='模板id名'></script>
3.把数据使用在模板里 在js中
template(‘模板id’,{必须是对象，你要渲染的数据})
4.该方法返回html格式字符串
art-template官网
5.使用全局变量辅助方法：
①传递数据{console：console}
②template.helper(name, callback)添加辅助方法，让模板引擎调用自定义的javascript方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div class="box"></div><!--1.导入-->
<script type="text/javascript" src="微金所响应式/js/template-native.js"></script>
<!--2.创建模板-->
<script type="text/template" id="template"><%console.log(list)%><%for(var i=0; i < list.length;i++){%><h1><%=list[i].username%><%=list[i].play%></h1><%}%>
</script>
<script>var arr = [{"username": "小明", "age": "12"}, {"username": "小鱼", "age": "18"}];//3.调用template()var html = template('template', {list: arr,console:console});console.log(html);document.querySelector('.box').innerHTML = html;
</script>
</body>
</html>
