原生js开发AJAX数据分页缓存模块

web前端群，189394454，有视频、源码、学习方法等大量干货分享

效果知识点：原生Js实现ajax数据交互、数据分页技术原理剖析，前端数据缓存, H5domAPI应用, 职业化前端的性能优化处理方案, 设计模式与用户体验。

👇html代码：

<div class="wrap flex_column">
    <div class="content flex_column">   
    </div>
    <div class="page">
        <ul class="flex_row">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</div>

👇css代码：

    <style>
    * { margin: 0; padding: 0; }

        li { list-style: none; }

        a { text-decoration: none; corlor: #222222; }

        .flex_row { display: flex; flex-direction: row; justify-content: space-around; align-items: center; }

        .flex_column { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }

        .wrap { width: 500px; height: 600px; margin: 100px auto; box-shadow: 0 0 5px #434343; }

        .wrap .content { width: 100%; height: 540px; }

        .wrap .content .items {width:100%; padding: 10px 0; border-bottom: 1px solid #cccccc;opacity:1;transition:1s; }
        .wrap .content .items.load{opacity:1;}
        .wrap .content .items .img img { width: 18%; height: 18%; margin-right: 5px; box-shadow: 0 0 3px #dddddd; }

        .wrap .content .items .img img { display: block; width: 45px; height: 45px; }

        .wrap .content .items .bd { width: 76%; }

        .wrap .content .items .bd p { vertical-align: sub; display: inline-block; width: 78%; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #222222; }

        .wrap .content .items .ft { width: 4%; color: #222222; font-weight: bold; }

        .wrap .page { width: 100%; height: 60px; }

        .wrap .page ul { width: 100%; height: 100%; }

        .wrap .page ul li { width: 40px; height: 40px; box-shadow: 0 0 4px #222222; font-weight: bold; text-align: center; line-height: 40px; cursor: pointer; }

        .wrap .page ul li:hover { background-color: rgba(227, 248, 251, 0.49); box-shadow: 0 0 4px rgba(51, 173, 251, 0.89); }
    </style>

👇javascript代码：

    <script src='js/myAjax.js'></script>
    <script>
        //var box=document.getElementById('box'); //es3就有的 dom节点获取方法
        var oContent=document.querySelector('.content'); //h5 API dom节点 ie8
        var oPages=document.querySelectorAll('.page ul li'); //获取所有的列表节点
        /*
            javascript  基于原型的动态解释性脚本语言
                改变dom元素以及样式
                用户交互事件反馈
                数据交互 ajax
                封装插件
                框架 vue angular node 设计模式 事务代理
                vue es5 
                缓存代理
                闭包 
                没有类的概念

        */

        var cache={};   
        changePage();
        setInterval(function(){
            cache={};
        },1000);
        function changePage(){
            for(let i=0,len=oPages.length;i<len;i++){ //let es6块级作用域变量声明方式
                oPages[i].onclick=function(){ //用户点击li 弹出li的序号 0-5
                    var page=i+1;      //1-6 0-5
                    if( page in cache){
                        addDom(cache[page]);
                        console.log('数据已经有了');
                    }else{
                        goTo(page);
                        console.time('数据还没有,正在加载');
                    }
                    console.log(cache);
                }
            }
        }
        goTo(1);
        function goTo(page){
            myAjax({
                url:'https://route.showapi.com/181-1', 
                method:'GET',
                data:{
                        showapi_appid:'30603', 
                        showapi_sign:'98960666afeb4992ae91971d13494090',
                        num:8,
                        page:page,  //数据获取分页
                    },
                success:function(res){
                    //console.log(res);//字符串 string 类json 字符串
                    var result=JSON.parse(res);
                    var dataList=result.showapi_res_body.newslist;
                    //获取到我们的数据数组
                    addDom(dataList);
                    cache[page]=dataList;
                    console.timeEnd('数据还没有,正在加载');
                }   
            });
        }
        function addDom(result){
            var dataList=result;
            var dataLength=dataList.length; //存储数组长度 8
            var str='';
            for(var i=0;i<dataLength;i++){
                str+=`
                     <a href="${dataList[i].url}" class="items flex_row">
                     <div class="img">[图片上传失败...(image-1019e5-1512215015686)]*10)}.jpg)</div>
                    <div class="bd">
                    <p class="label">${dataList[i].title}</p>
                    </div>
                    <div class="ft">></div>
                 </a>`
                }
                oContent.innerHTML=str; //把生成好的节点字符串 添加到content里面
                //console.log(result.showapi_res_body.newslist[0].url)
        }
        

    
        //(function(){})(); //IIFE


         //函数执行 引入进来的 myAjax函数
    </script>