JSON - 2.模板渲染、缓存数据、案例实战 - 《JavaScript》

1.模板渲染:
2.案例实战

1.模板渲染:

html模板

<ul class="list J_list"></ul> 
<script type="text/html" id="J_itemTpl">
        <li class="list-item">
            <div class="inner">
                <div class="img">
                    <img src="http://10.url.cn/qqcourse_logo_ng/ajNVdqHZLLAibZAsw0xhFpUeJmHcOGzXwIMu8d3tz5388Tod9zfTYzKRr3Yum8M4ibBHtXGn3iaH34/356?tp=webp" />
                </div>
                <div class="info">
                    <h4>{{classname}}</h4>
                    <p class="row-2">{{name}}老师</p>
                    <p class="row-3">{{watched}}人学习</p>
                  </div>
            </div>
        </li>
 </script>

精简版

var tpl = document.getElementById('J_itemTpl').innerHTML,
    oList = document.getElementsByClassName('J_list')[0];


renderList(data, tpl, oList);

function renderList(data, tpl, oList) {
    var list = '';
    data.forEach(function (elem) {
        list += tpl.replace(/{{(.*?)}}/g, function (node, key) {
            return {
                career: elem.career,
                city: elem.city,
                salary: elem.salary,
                img: elem.img
            } [key];
        });
    });
    // 需插入的模板
    oList.innerHTML = list;
}

详细版

function render() {
    //字符串数据
    var jsonData = document.getElementById('J_data').innerHTML,
        //渲染的数据模板
        tpl = document.getElementById('J_tpl').innerHTML,
        //字符串数据转json
        data = JSON.parse(jsonData),
        len = data.length,
        // 渲染后插入的列表
        oList = document.getElementsByClassName('js-list')[0],
        list = '',
        item;

    for (var i = 0; i < len; i++) {
        item = data[i];
        list += setTplToHTML(tpl, regTpl, {
            career: item.career,
            city: item.city,
            salary: item.salary,
            img: item.img
        })
    }
    // 循坏完成将数据填充进oList里列表
    oList.innerHTML = list;
}

// 需要渲染的数据项
function dataObj(data) {
    return {
        career: data.career,
        city: data.city,
        salary: data.salary,
        img: data.img
    }
}

//  tpl:渲染模板,regExp:正则替换规则,opt数组中的每一项
function setTplToHTML(tpl, regExp, opt) {
    return tpl.replace(regExp(), function (node, key) {
        console.log(node, key);
        return opt[key];
    })
}

// 正则替换规则
function regTpl() {
    return new RegExp(/{{(.*?)}}/, 'gim');
}

render();

2.案例实战

<!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>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="cover">
        <div class="student-album">
            <div class="album-title">
                <h1>心有猛虎 细嗅蔷薇</h1>
                <p>一万年太久 只争朝夕</p>
            </div>
            <div class="album-wrap">
                <ul class="list js-list clearfix">
                </ul>
            </div>
        </div>
    </div>
    <div id="J_data" style="display: none;">
        [{"id":"1","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"15","img":"1.jpg"},{"id":"2","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5e7f\u5dde","salary":"11","img":"2.jpg"},{"id":"3","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u4e0a\u6d77","salary":"10","img":"3.jpg"},{"id":"4","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u6210\u90fd","salary":"9","img":"4.jpg"},{"id":"5","career":"\u540e\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"11","img":"5.jpg"},{"id":"6","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"13","img":"6.jpg"},{"id":"7","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u6df1\u5733","salary":"12","img":"7.jpg"},{"id":"8","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u4e0a\u6d77","salary":"10","img":"8.jpg"},{"id":"9","career":"\u540e\u7aef\u5de5\u7a0b\u5e08","city":"\u6210\u90fd","salary":"10","img":"9.jpg"},{"id":"10","career":"\u524d\u7aef\u5de5\u7a0b\u5e08","city":"\u5317\u4eac","salary":"18","img":"10.jpg"}]
    </div>

</body>
<script type="text/html" id="J_tpl">
    <li class="list-item">
        <div class="mask">
            <h3>{{career}}{{city}}</h3>
            <p>月薪{{salary}}k</p>
        </div>
        <img src="img/{{img}}" alt="">
    </li>
</script>
<script src="./js/index.js">
</script>


</html>

body {
    margin: 0;
    color: #3c3c3c;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

ul,
li,
div {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}

img {
    width: 100%;
    height: 100%;
}

.clearfix::after,
::before {
    content: '';
    display: table;
    clear: both;
}

.cover {
    min-width: 1200px;
}

.student-album {
    width: 1200px;
    margin: 80px auto;
}

.album-title {
    height: 100px;
    text-align: center;
}

.album-title h1 {
    position: relative;
    height: 65px;
    font-size: 35px;
    color: #000;
}

.album-title h1::before,
.album-title h1::after {
    content: "";
    position: absolute;
    top: 25px;
    width: 50px;
    height: 2px;
    background-color: #000;
}

.album-title h1::before {
    left: 340px;
}

.album-title h1::after {
    right: 340px;
}

.album-title p {
    font-size: 20px;
}

.student-album .list-item {
    position: relative;
    float: left;
    width: 216px;
    height: 216px;
    margin: 30px 30px 0 0;
    border-radius: 50%;
    overflow: hidden;
}

.student-album .list-item:nth-child(5),
.student-album .list-item:nth-child(10){
    margin-right: 0;
}

.student-album .list-item .mask {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    text-align: center;
    transition: bottom .2s ease-in-out;
}

.student-album .list-item:hover .mask {
    bottom: 0;
}

子元素宽度+边距总和超过父元素的宽度总和解决方法：
1.将最后一个元素的边距去掉
a.nth-child(n)
b.给需要去掉边距的元素加一个类名: -> css margin0;
2.将父元素的宽度加大
例如子元素的宽度总和1230 父元素设置1240px
红：1240；

window.onload = function(){
    render();
}

function render() {
    //字符串数据
    var jsonData = document.getElementById('J_data').innerHTML,
        //渲染的数据模板
        tpl = document.getElementById('J_tpl').innerHTML,
        //字符串数据转json
        data = JSON.parse(jsonData),
        len = data.length,
        // 渲染后插入的列表
        oList = document.getElementsByClassName('js-list')[0],
        list = '',
        item;

    for (var i = 0; i < len; i++) {
        item = data[i];
        list += setTplToHTML(tpl, regTpl, {
            career: item.career,
            city: item.city,
            salary: item.salary,
            img: item.img
        })
    }
    // 循坏完成将数据填充进oList里列表
    oList.innerHTML = list;
}

// 需要渲染的数据项
function dataObj(data) {
    return {
        career: data.career,
        city: data.city,
        salary: data.salary,
        img: data.img
    }
}

//  tpl:渲染模板,regExp:正则替换规则,opt数组中的每一项
function setTplToHTML(tpl, regExp, opt) {
    return tpl.replace(regExp(), function (node, key) {
        // console.log(node, key);
        return opt[key];
    })
}

// 正则替换规则
function regTpl() {
    return new RegExp(/{{(.*?)}}/, 'gim');
}