artTemplate模板引擎的简单实用
虽说现在多数公司都是用
MV*框架做项目，数据驱动视图更新，Dom操作部分就不需要太在意，只管逻辑部分。就在今天2018.6.26日，这是有一个 特别的日子 ，因为我我….不说了！说一下我哪个美丽又可爱的朋友问我jq里怎么用模板引擎，所以我就写个demo给她，虽说自己也是渣渣，但是能帮到她就挺好的，所以我想既然都demo都写了，就发个博客记录一下，看有没有人恰巧有用，点上一赞足以让我开心的像200斤的孩子了。这里我就给他推荐art-template，为啥呢？因为官方吹的牛逼，哈哈哈！有种舍我其谁之势，所以就选择了他。如下图：
art-template官网地址。
里面有详细的介绍，我这里就简单的用script标签引入的方法做个小小demo。不扯这么多没用的，代码如下：
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>artTemplatetitle>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./template-web.js">script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
}
.top {
height: 100px;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
color: #333;
}
.right {
width: 72%;
float: right;
margin-top: 20px;
margin-right: 5px;
}
/* 图片 */
.top_left {
display: inline-block;
width: 22%;
margin-top: 20px;
}
.top .top_left .imgs {
display: inline-block;
width: 100%;
height: 98%;
text-align: center;
}
.top .top_left .imgs img {
width: 60px;
line-height: 60px;
float: right;
}
.top .top_center {
display: inline-block;
width: 45%;
}
.top .top_right {
display: inline-block;
width: 50%;
}
.top .top_bottom {
display: inline-block;
width: 50%;
text-align: center;
color: #333;
}
.top .top_bottom a {
width: 32px;
height: 40px;
}
.top .top_bottom a img {
width: 32px;
}
.right ul li {
margin-bottom: 10px;
}
.top_center ul li:nth-child(1) {
font-weight: bold;
}
.date_time {
margin: 15px 15px 0 15px;
color: #333;
}
.date_time ul li {
margin: 15px 0;
}
.judge {
margin: 0 15px 0 15px;
color: #333;
}
.judge p {
margin: 15px 0;
}
.border {
height: 5px;
background-color: #F6F6F6;
}
.bottom {
margin: 15px 15px 0 15px;
color: #333;
}
/* 输入框 */
textarea {
width: 100%;
height: 70px;
margin-top: 10px;
padding: 8px;
font-size: 14px;
}
.consent {
width: 100%;
margin-top: 35px;
}
.consent_lf {
display: inline-block;
width: 49%;
text-align: center;
}
.consent_rg {
display: inline-block;
width: 49%;
text-align: center;
}
.consent_left {
width: 130px;
height: 40px;
border-radius: 20px;
border: none;
background-color: #FF5E5E;
color: #fff;
font-size: 16px;
}
.consent_right {
width: 130px;
height: 40px;
border-radius: 20px;
border: none;
background-color: #00BA86;
color: #fff;
font-size: 16px;
}
.bottom_span {
display: inline-block;
width: 100%;
padding: 10px 0;
margin-top: 10px;
background-color: #EEE;
padding-left: 10px;
}
.height {
height: 50px;
width: 100%;
}
style>
head>
<body>
<div id="content">div>
<script id="test" type="text/html">
class="top">
<div class="top_left">
<span class="imgs">
<span class="">span>
<img src="{{avator}}" alt="">
span>
div>
<div class="right">
<div class="top_center">
<ul>
<li>{{teacherName}}li>
<li>{{zhiye}}li>
ul>
div>
<div class="top_bottom">
<a tel="18875639854">
<img src="{{avator}}" alt="">
a>
<p>联系TAp>
div>
div>
div>
<div class="date_time">
<ul>
<li>是否有调班对象： {{if isTb}}<span>是span> {{else if !isTb}}<span>否span>{{/if}}
li>
<li>开始时间：
<span>{{start_time}}span>
li>
<li>结束时间：
<span>{{end_time}}span>
li>
<li>请假时长：
<span>{{day}}天span>
li>
<li>请假事由：
<span>{{yuanyin}}span>
li>
ul>
div>
<div class="judge">
<ul>
<p>调班对象：
<span>苏菲span>
p>
<p>
<span>备注：span>
<span>哈哈哈哈或或或或或或或或或或或或或或或或或或span>
p>
ul>
div>
<div class="border">div>
<div class="bottom">
<p>调班保洁师:
<span>{{dbbjs}}span>
p>
<textarea name="txt" placeholder="请输入你的意见">textarea>
<span class="bottom_span">{{jianyi}}span>
div>
<div class="bottom">
<p>保洁师主管:
<span>{{zhuguan}}span>
p>
<textarea name="txt" placeholder="请输入你的意见">textarea>
div>
<div class="consent">
<div class="consent_lf">
<button class="consent_left">不同意button>
div>
<div class="consent_rg">
<button class="consent_right">同意button>
div>
div>
<div class="height">div>
script>
<script>
var data = {
avator: "https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=b3d532e743c2d562ed08d6edd71390f3/7e3e6709c93d70cf312a368af4dcd100bba12b60.jpg",
isTb: false, //是否调班
teacherName: "水水",
zhiye: "前端大佬",
start_time: "1996-06-30",
end_time: "2018-06-30",
yuanyin: "因为水水最美，就不想上班，怎么滴???????????????????",
jianyi: "同意！恭喜老姐，棒棒哒！！同意！恭喜老姐，棒棒哒！！", //建议，
dbbjs: "苏菲",
day: "999999", //请假天数
zhuguan: "邹佩玲", //保洁主管
isAgreen: true, //是否同意
};
var html = template('test', data); //data为模板数据
document.getElementById('content').innerHTML = html; //将生成的模板填充添加到对应的容器中
script>
body>
html>
效果图如下：
