AJAX里使用模板引擎
一、概述:
- 处理响应数据渲染可以使用模板引擎(实际上就是一个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文件执行
四、参考:JavaScript模板引擎实例应用
【转载文章务必保留出处和署名,谢谢!】