一、概述：
- 处理响应数据渲染可以使用模板引擎（实际上就是一个API，目的是更容易的将数据渲染到HTML中）
- 目前市面上有许多模板引擎，可以参考
- 推荐使用artTemplate，它采用作用域预声明的技术来优化模板渲染速度，同时支持 NodeJS 和浏览器。
二、模板引擎步骤：
①选择一个模板引擎，下载模板引擎文件
②引入到页面中
③准备一个模板
④准备一个数据
⑤通过模板引擎的js提供的一个函数将模板和数据整合得到渲染结果HTML
⑥将渲染结果的HTML设置到默认元素的innerHTML中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="p"></p> <script src="lib/template-web.js"></script> <script type="text/template" id="tpl"> 我叫 {{name}} 我来自 {{provices}} 我的爱好是 {{each hobbies}} {{$value}} {{/each}} </script> <script> var data={ name:'eric', provices:'江西', hobbies:['代码','运动','电脑游戏'] } var ret=template('tpl',data); var p=document.getElementById('p'); p.innerHTML=ret; </script> </body> </html>
三、模板写入script的原因
- 如果写入到JS变量中，维护不方便，不能换行，没有着色
- 写入到script标签中，innerHTML不会显示在界面上
- 注意：script标签里如果type类型不是text/JavaScript，标签内容不会安装js文件执行