模板引擎
是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
文章中采用CDN的方式使用模板引擎:
<script src=“https://cdn.bootcdn.net/ajax/libs/art-template/4.13.1/lib/template-web.min.js”>
模板引擎用法:
<script id="template_html" type="text/template">
//里面直接写html,也可以写css
<h1>模板引擎</h1>
</script>
模板引擎将页面与数据分开,数据在模板引擎中的使用方式是{{ }}
<script id="template_html" type="text/template">
//里面直接写html,也可以写css
<h1>{{title}}</h1>
</script>
最简单的Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.1/lib/template-web.min.js"></script>
</head>
<body>
<main></main>
<script id="test" type="text/template">
<div>
<h1>{{tite}}</h1>
<p>{{content}}</p>
</div>
</script>
<script>
let data={
title:"标题",
content:"内容"
}
let html=template("test",data);
document.getElementsByTagName('main')[0].innerHtml=html;
</script>
</body>
</html>
template(id,数据)可以理解为用于生成页面,将数据引入到指定的模板中。
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.1/lib/template-web.min.js"></script>
</head>
<body>
<div>
<a href="#" onclick="request('ly')">旅游资讯</a>
<a href="#" onclick="request('xw')">新闻资讯</a>
<a href="#" onclick="request('ty')">体育资讯</a>
<div class="main"></div>
</div>
<!--模板 id必须写-->
<script id="test" type="text/template">
<h1 onclick="show('{{title}}')">标题:{{title}}</h1>
<p>
内容:{{text}}
</p>
<img src={{src}} title={{alt}}>
//可以在CSS中使用数据
<style>
h1{
color:{{color}};
}
</style>
</script>
<script>
//模板引擎中的点击事件
function show(item){
alert(item);
}
let main=document.getElementsByClassName('main')[0];
function request(item){
switch(item){
case "ly":{
setTimeout(()=>{
let data={
title:"旅游标题",
text:"图片中的特别好看",
src:"./img/3.jpg",
alt:"图片1",
color:"red",
}
setContent(data);
},3000);
break;
}
case "xw":{
setTimeout(()=>{
let data={
title:"新闻标题",
text:"这件事动静特别大",
src:"./img/services-bg.jpg",
alt:"图片2",
color:"skyblue"
}
setContent(data);
},3000);
break;
}
case 'ty':{
setTimeout(()=>{
let data={
title:"体育标题",
text:"赛事很精彩",
src:"./img/朦胧图片.jpg",
alt:"图片3",
color:"#116554"
}
setContent(data);
},3000);
break;
}
}
}
function setContent(data){
//template(script的标签id,数据);
let html=template("test",data);
main.innerHTML=html;
}
</script>
</body>
</html>
效果图: