css

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

a{
	text-decoration: none;
}

ul,li{
	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 .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: 100%;
}
/* 企业中布局都是如此：左边图片：宽度141px，绝对定位，相对于上面的inner；top: 0;left: 0; 
* 然后让右边的部分: 宽度195px，padding-left：151px  
*/
.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{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 44px;
	border-top: 1px solid #ddd;
	background-color: #fff;
	
}

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

.footer .btn-item.cur .page-lk{ /* 因为是一起的，所以.btn-item.cur 中间不能有空格 */
	background-color:#ddd;
	color: #000;
}

.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;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="index.css">
</head>

<body>
	<div class="wrap">
		<div class="header">
			<h3>课程列表</h3>
		</div>
		<div class="course">
			<div class="loading">正在加载中...</div>
			<ul class="list js-list">
			</ul>
		</div>
		<div class="footer">
			<div class="btn-group">
				<div class="btn-item cur">
					<!-- cur不能放到a标签上，会很麻烦  -->
					<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="./jquery.min.js"></script>
	<script type='text/javascript' src="utils.js"></script>
	<script type="text/javascript" src="./1.js"></script>
</body>

</html>

js

// 在ajax里请求数据， 把已请求过的数据暂时保存到缓存池里面，当缓存池存在这批数据时，就直接调这批数据，不再去请求ajax
//这样大大降低了服务器的压力并且提高了速度
// 比如说 访问浏览器时最开始速度较慢，再点击时速度变快了 
window.onload = function () {
    init();
}
function init() {
    initCourseList();
}
var initCourseList = (function () {
    var oBtnGroup = document.getElementsByClassName('btn-group')[0],
        oBtnItems = document.getElementsByClassName('btn-item'),
        oList = document.getElementsByClassName('js-list')[0],
        oTpl = document.getElementById('J_itemTpl').innerHTML,
        loading = document.getElementsByClassName('loading')[0],
        page = 0,
        t = null, //计时器
        cache = {};  //设置一个缓存


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

    function bindEvent() {
    addEventListener('click', btnClick); //事件监听函数： 'click'：描述事件名称的字符串。 btnClick；描述了事件触发后执行的函数
    }

    function btnClick(e) {
        var e = e || window.event, //兼容
            tar = e.target || e.srcElement, //兼容
            oParent = tar.parentNode,  //点击a标签时 找到相应的上边的父极
            className = oParent.className,
            thisIdx = -1;

        if (className === 'btn-item') {  //如果className 等于 上边父级的时候
            // console.log(tar.innerHTML);


            thisIdx = Array.prototype.indexOf.call(oBtnItems, oParent); //声明一个下标， 存储各个按钮，以及按钮上边的父级的下标
// indexOf 当前的下标，indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
//找到当前点击的btn-item的下标，那么就用这种方式：第一个参数填入所有btn-item的集合，第二层填入当前点击的a外层的btn-item元素
           
            var len = oBtnItems.length,
                item;

            page = thisIdx;

            if (cache[page]) {   //如果缓存池存在则去缓存池里面找，如果不存在再去请求ajax的数据
                getCacheCourse();
            } else {
                getAjaxCourses();
            }

            for (let i = 0; i < len; i++) {
                item = oBtnItems[i];   //遍历整个按钮
                item.className = 'btn-item';  //让所有的按钮重新赋值为 'btn-item'
            }
            oParent.className = 'btn-item cur';  //当前的标签变为'btn-item cur'  结合css就能让按钮变灰    
        }
    }

    function getAjaxCourses() {
        ajaxReturn({
            url: APIs.getCourses,
            data: {
                page: page        // 对应第48行的    page = thisIdx;   
            },
            success: function (data) {
                cache[page] = data;  //数据缓存在缓存池里面

                loading.style.display = 'block'; //改变display：none 让原本隐藏的loading显现出来
                //   console.log(data);  //接口返回的数据为data
                t = setTimeout(function () {
                    render(data);
                    loading.style.display = 'none';
                }, 500)    //延时500ms
            },
            error: function () {
                console.log('获取数据失败');
            }
        })
    }

    function getCacheCourse() {
        var data = cache[page];
        render(data);
    }

    function render(data) { //渲染
        var list = ' ',  //接受所有的数据
            len = data.length,
            item;

        for (var i = 0; i < len; i++) {
            item = data[i];
            list += setTplToHTML(oTpl, regTpl, {
                folder: item.folder,
                classname: item.classname,
                name: item.name,
                watched: item.watched
            });
            oList.innerHTML = list;
        }
    }

    return function () {
        init();
    }
})();

var APIs = {
    getCourses: 'http://study.jsplusplus.com/Lfcourses/getCourses' //这个api需要一个数据pages，点第几页就是第几页

}

// 分装AJAX
function ajaxReturn(opt) {
    $.ajax({
        url: opt.url,   //url是我们要配置的
        type: 'POST',    //采取哪种形式: post方式
        dataType: 'JSON',     //数据类型用json形式
        data: opt.data,     // data接收一个对象
        timeout: 10000,      //超时的时间：10万毫秒
        success: opt.success,  //成功的回调函数
        error: opt.error,  //也是一个函数
    })

}

最终效果：

实战二：缓存池

总结

难点、新收获的知识点

1.e.srcElement：事件.源（它的意思就是：当前事件的源
ie支持e.srcElement，firefox 支持e.target。

parentNode 属性可返回某节点的父节点。
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。在setTimeout 函数之中设置 loading.style.display = 'none';
在setTimeout之前设置 loading.style.display = 'block';
这样就能达到等待画面的效果

实战二：缓存池

css

html

js

最终效果：

总结

难点、新收获的知识点

JS步骤

1. 获取事件元素

2.设置点击元素

3.设置AJAX以及 getAJAX函数

4.设置渲染函数render

5.设置缓存池

常见问题FAQ

掘金(我会接网线) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

css

html

js

最终效果：

总结

难点、新收获的知识点

JS步骤

1. 获取事件元素

2.设置点击元素

3.设置AJAX以及 getAJAX函数

4.设置渲染函数render

5.设置缓存池

常见问题FAQ

掘金(我会接网线) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式