原生JavaScript获取课程列表案例——模板渲染、前端缓存池、Ajax请求数据、JSON数据

模板渲染

1. 模板
   

2. 封装好的 将 模板 转成 HTML 的方法
   （会调用就行）

function setTplToHTML(tpl, regExp, opt){
  return tpl.replace(regExp(), function(node, key){
    return opt[key];
  });
}

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

前端缓存池

1. 很多信息只要请求过一遍就可，一直请求会给服务器产生压力
2. 分页、切换、tab栏，其实都应该用缓存池来做

案例： 获取课程列表

完整代码

步骤分析：

1. 第一次加载页面的时候第一页课程要出来 ——init()初始化的时候
2. 第一次点击页码的是时候请求数据，通过页码来切换内容
3. 第一次请求的数据存入 缓存池，以后切换页面的时候到缓存池中查找。有就从缓存池获取数据进行渲染，没有就进行Ajax请求

点击页码：

• 切换页面内容、更改样式、获取点击的下标赋值给page 传给页面请求

获取所点击页码下标的方法
（要知道indexOf的机制）

indexOf( searchElement )方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

• searchElement：要查找的元素

           // 获取下标的方法 ！！！
            thisIdx = Array.prototype.indexOf.call(oBtnItems, oParent);
  // 这里的call更改this指向，后头一个才开始传参

主要代码：

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

function init() {

    initCourseList();
}


var initCourseList = (function () {

    var oBtnGroup = document.getElementsByClassName('btn-group')[0],
        // 要获取index 
        oBtnItems = document.getElementsByClassName('btn-item'),
        oList = document.getElementsByClassName('js-list')[0],
        oTpl = document.getElementById('J_itemTpl').innerHTML,
        oLoading = document.getElementsByClassName('loading')[0],
        cache = {},
        page = 0,
        t = null;

    function init() {
        getAjaxCourses(page);
        bindEvent();
        console.log('thisIdx');

    }


    function bindEvent() {
        addEvent(oBtnGroup, 'click', btnClick);


    }

    function btnClick(e) {

        var e = e || window.event,
            tar = e.target || e.srcElement,
            // 拿到外层盒子 
            oParent = tar.parentNode,
            className = oParent.className;

        if (className === 'btn-item') {
            var len = oBtnItems.length,
                thisIdx = -1,
                item;

            // 获取下标的方法 ！！！
            thisIdx = Array.prototype.indexOf.call(oBtnItems, oParent);
            page = thisIdx;
            // 干掉所有人
            console.log(page);

            for (var i = 0; i < len; i++) {
                item = oBtnItems[i];
                item.className = 'btn-item';
            }
            //  留下我自己
            // 所以我自己是哪一个？ 要拿到下标
            oBtnItems[thisIdx].className += ' cur';

            if (cache[page]) {
                getCacheCourses();
            } else {
                getAjaxCourses();
            }
        }
    }

    function getAjaxCourses() {
        ajaxReturn({
            url: 'http://study.com/Lfcourses/getCourses',
            data: {
                page: page
            },
            success: function (data) {
                // 数据请求成功
                // 显示加载状态、将数据存到缓存池中、500ms后渲染页面
                oLoading.style.display = 'block';
                cache[page] = data;
                console.log(cache);
                t = setTimeout(function () {
                    oLoading.style.display = 'none';
                    render(data);
                }, 500);
            },
            error: function () {
                alert('获取数据失败');
            }
        })
    }

    // 从缓存池中获取数据来渲染
    function getCacheCourses() {
        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();
    }
})();



function ajaxReturn(opt) {
    $.ajax({
        url: opt.url,
        type: 'POST',
        dataType: 'JSON',
        data: opt.data,
        timeout: 100000,
        success: opt.success,
        error: opt.error
    })
}

---

注意点

1. 块化开发

• 立即执行函数
• 独立的作用域

2. 两栏布局

• 左侧绝对定位
• 右侧 padding-left