0、模板引擎 · 2021 web前端工程师

# 模板引擎 1.模板引擎文档:[http://aui.github.io/art-template/zh-cn/index.html](http://aui.github.io/art-template/zh-cn/index.html) Github:[https://github.com/aui/art-template](https://github.com/aui/art-template) 1.1 Ajax项目中存在的问题 1.数据和HTML字符串拼接导致代码混乱，拼接容易出错,增加修改难度。 2.业务逻辑和用户界面混合，代码不易维护。 ## 1.1 Ajax项目中存在的问题 ~~~ 1.数据和HTML字符串拼接导致代码混乱，拼接容易出错，增加修改难度。 2.业务逻辑和用户界面混合，代码不易维护。 ~~~ ~~~ for (var i = 0; i < result.length; i++) { html += '<! DOCTYPE html>\ <html lang="en">\ <head>\ <meta charset="UTF-8">\ <title>'+ title +'</title>\ </head>\ <body>\ <h1> onclick="sayHi( '+name+ ' )">你好，' +name+'我今年' +age+'岁</h1>\ <ul>\ <li> title="'+hobbies [0]+'">'+hobbies[0]+'</li>\ </ul>\ </body>\ </html>'; } ~~~ ## 1.2模板引擎的作用 1.使用模板引|擎提供的模板语法可以使数据和HTML字符串拼接的更加美观，代码易于维护。 2.模板引擎能够使用户界面的数据拼接和JavaScript业务逻辑分离，增加程序的可扩展性。 3.使用模板引|擎可以提高开发效率。 ~~~ <h1>你好，{{name}}, 我今年{{age}}岁</h1> <ul> {{each}}| <li>{{$value. hobbies}}</li> {{/each}} </ul> ~~~ ## 1.3模板渲染（重点引用与使用） ~~~ <script src="./js/template-web. js"></script> <script type="text/html" id="tpl"> <div> <span>{{name}}</span> <span>{{age}}</span> </div> </script> ~~~ ~~~ //将特定模板与特定数据进行拼接 const html = template('tpl',{ name:‘张三 '， age: 20 }); ~~~ ## 模板引擎使用（重点） ~~~ <body> <div id=" containen"></div> //1、引入模板引擎js <script src="js/ template-web. js"></script> //2、添加模板 <script type="text/html" id="tpl"> <div> <span>姓名: {{name}}</ span> <span>年龄: {{age}}</ span> </div> </script> //3、将模板拼接，然后渲染到页面 <script> var data={ name:'李四'， age: 30 } //这是告诉模板引擎将模板id为tpl的模板和data数据对象进行拼接 var html = template( 'tpl', data); document . getElementById(' container' ). innerHTML = html ; </script> ~~~