原生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); } })
...