原生js实现分页缓存

前言

　内容涉及知识点:

　　1.后台分页查询概念

　　2.原生ajax请求

　　3.闭包

接口:https://api.apiopen.top/getJoke?page=1&count=2&type=video

思路:

  　  利用js的内存机制 , 创建一个对象缓存池 ,通过闭包保证缓存池对象不会被GC回收 ,而且能被外界访问　

　　读取数据时 , 判断缓存池中是否已经存在 , 不存在则发送ajax获取数据并缓存起来 ,

　　否则直接在缓存池中获取数据　 

var cache=cacheData();
    function myAjax(opt){
        opt= opt || {};
        opt.method = opt.method  || 'GET';
        opt.url = opt.url || '';
        opt.async = opt.async || true;
        opt.data = opt.data || null ; 
        opt.dataType = opt.dataType    || 'JSON';
        opt.success = opt.success || function(){};
        var xmlHttp=null;
        if (new XMLHttpRequest) {
            xmlHttp =  new XMLHttpRequest();
        } else {
            xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
        }
        var params = [];
        for (var key in opt.data) params.push(key + '=' + opt.data[key]);
        var postData = params.join('&');
        if (opt.dataType == 'JSONP') {
            creatScript(opt.url , postData)
        }else{
            if (opt.method.toUpperCase() == 'POST') {
                xmlHttp.open(opt.method, opt.url, opt.async);
                xmlHttp.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
                xmlHttp.send(postData);
            }else if (opt.method.toUpperCase() == 'GET') {
                xmlHttp.open(opt.method, opt.url+'?' + postData , opt.async);
                xmlHttp.send()
            }
            xmlHttp.onreadystatechange = function(){
                if (xmlHttp.readyState==4 && xmlHttp.status == 200) {
                    if (opt.dataType == 'JSON') {
                        opt.success(xmlHttp.response)
                    }
                }
            }
        }
    }

    function creatScript(url,data){
        var oScript = document.createElement('script');
        oScript.src = url + "?" + data + '&callback=getEn';
        document.body.appendChild(oScript);
    }
    function getData(page){
        var page = page || 1;
        myAjax({
            url:'https://api.apiopen.top/getJoke',
            data:{
                page:page, //页码
                count:2,    //条数       
            },
            success(rep){
                var rep = JSON.parse(JSON.stringify(rep))
                cache.set(page,rep)
            }
        })
    }
    
//利用js的内存机制 创建缓存池  全局变量不会被回收
    function cacheData(){  //通过闭包 保证cache不会被GC回收 ,而且能被外界访问
        var cache={}; //声明一个缓存池变量
        return {
            set:function(page,data){//存储新数据
                cache[page] = data;
            },
            get:function(page){  //读取数据
                if (page in cache) {
                    console.log('数据已缓存,无需重复请求')
                }else {
                    getData(page)
                }
            }
        }
    }

    var cache_ul= document.querySelector('.cache_ul');
    cache_ul.addEventListener('click',function(e){
        var e = e || window.event;
        if (e.target.tagName.toLowerCase() == 'li') {
            var page = e.target.innerText;
            cache.get(page);
        }
    })

...