JSON - 3.前端缓存数据设计、前端缓存池 - 《JavaScript》

知识点1：css滚动条
知识点2：类数组如何使用数组方法：
知识点3：缓存池

知识点1：css滚动条

父元素设置固定高度超出隐藏若子元素高度超出则出现滚动条

知识点2：类数组如何使用数组方法：

     Array.prototype.slice.call(arr) ：将类数组转换位数组<br />         Array.prototype.forEach.call(arr)： 把要使用的数组方法call通过放到类数组上使用

知识点3：缓存池

1.定义一个cache对象 cache = {}, page=0
2.每次将success回调函数里请求回的data数据放进缓存池: cache[page] = data;
3.要再次请求数据前判断缓存池里是否有数据如果有则直接使用缓存池的数据进行数据渲染如果没有则请求数据

cache[page] ? getCacheCourses(page) : getAjaxCourses(page);

//缓存池数据渲染
function getCacheCourses(page) {
       var data = cache[page];
       render(data);
}

    //  ajax数据请求
    function getAjaxCourses(page) {
        $.ajax({
            url: 'http://study.jsplusplus.com/Lfcourses/getCourses',
            type: 'post',
            dataType: 'JSON',
            data: {
                page: page
            },
            success: function (data) {
                console.log(data);
                cache[page] = data;
                oLoading.className += ' show'
                setTimeout(function () {
                    render(data);
                    oLoading.className = 'loading J_loading'
                }, 500)
            },
            error: function () {
                console.log('获取失败');
            }
        })

    }

<!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="wrap">
        <div class="header">
            <h3>课程列表</h3>
        </div>
        <!-- load模块 -->
        <div class="course">
            <div class="loading J_loading">正在加载中...</div>
            <!-- 列表内容 -->
            <ul class="list J_list"></ul>
        </div>
        <!-- 页码脚注 -->
        <div class="footer">
            <div class="btn-group J_btnGroup">
                <div class="btn-item cur">
                    <a href="javascript:;" class="page-lk">1</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">2</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">3</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">4</a>
                </div>
                <div class="btn-item">
                    <a href="javascript:;" class="page-lk">5</a>
                </div>
            </div>
        </div>
    </div>

    <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>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/utils.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    font-weight: normal;
}

a {
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.wrap {
    position: relative;
    width: 375px;
    height: 667px;
    margin: 100px auto;
    box-shadow: 0 0 5px #999;
}

.header {
    height: 44px;
    background-color: #000;
    text-align: center;
    line-height: 44px;
    color: #fff;
}

.course .loading {
    display: none;
    height: 44px;
    background-color: #eee;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
}
.course .loading.show{
    display: block;
}

/* 父元素设置超出隐藏 若子元素高度超出 则出现滚动条 */
.course .list {
    height: 579px;
    overflow: auto;
}

.course .list-item {
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}

.course .list-item .inner {
    position: relative;
    height: 100px;
}

.course .list-item .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 141px;
}

.course .list-item .img img {
    width: 100%;
    height: 100%;
}

.course .list-item .info {
    width: 195px;
    padding: 0 0 0 151px;
    box-sizing: border;

}

.course .list-item .info p {
    font-size: 14px;
    margin-top: 7px;
}

.course .list-item .info p.row-2 {
    color: green;
}

.course .list-item .info p.row-3 {
    color: #999;
}

.footer .btn-item {
    float: left;
    width: 20%;
    height: 100%;
}

.footer .btn-item .page-lk {
    display: block;
    width: 30px;
    height: 30px;
    margin: 7px auto;
    background-color: #000;
    text-align: center;
    line-height: 30px;
    color: #fff;
}

.footer .btn-item.cur .page-lk {
    background-color: #eee;
    color: #000;
}

;
(function () {
    var oBtnGroup = document.getElementsByClassName('J_btnGroup')[0],
        oBtnItems = document.getElementsByClassName('btn-item'),
        tpl = document.getElementById('J_itemTpl').innerHTML,
        oList = document.getElementsByClassName('J_list')[0],
        oLoading = document.getElementsByClassName('J_loading')[0],
        page = 0,
        cache = {};

    var init = function () {
        bindEvent();
        getAjaxCourses(page);
    }

    function bindEvent() {
        oBtnGroup.addEventListener('click', btnClick, false);
    }

    function btnClick(e) {
        var e = e || window.event,
            tar = e.target || e.srcElement,
            oParent = tar.parentNode,
            className = oParent.className;
        if (className === 'btn-item') {
            var thisIdx = Array.prototype.indexOf.call(oBtnItems, oParent);
            page = thisIdx;
            // 此处知识点 类数组不能使用数组方法：
            // Array.prototype.slice.call(arr) ：将类数组转换位数组
            // Array.prototype.forEach.call(arr)： 把数组方法放到类数组上使用
            Array.prototype.forEach.call(oBtnItems, function (elem) {
                elem.className = 'btn-item';
            });

            oParent.className += ' cur';

            // 如果缓存池池有数据则调用缓存池的数据
            // if (cache[page]) {
            //     getCacheCourses(page);
            //     // 否则使用ajax请求
            // } else {
            //     getAjaxCourses(page);
            // }
            cache[page] ? getCacheCourses(page) : getAjaxCourses(page);
        }
    }

    // 列表渲染
    function render(data) {
        var list = '';
        data.forEach(function (elem) {
            list += tpl.replace(/{{(.*?)}}/gim, function (node, key) {
                return {
                    folder: elem.folder,
                    classname: elem.classname,
                    name: elem.name,
                    watched: elem.watched
                } [key];
            });
        });
        oList.innerHTML = list;
    }
    //  ajax数据请求
    function getAjaxCourses(page) {
        $.ajax({
            url: 'http://study.jsplusplus.com/Lfcourses/getCourses',
            type: 'post',
            dataType: 'JSON',
            data: {
                page: page
            },
            success: function (data) {
                console.log(data);
                cache[page] = data;
                oLoading.className += ' show'
                setTimeout(function () {
                    render(data);
                    oLoading.className = 'loading J_loading'
                }, 500)
            },
            error: function () {
                console.log('获取失败');
            }
        })

    }
    // 缓存池
    function getCacheCourses(page) {
        var data = cache[page];
        render(data);
    }
    init();
})();