ECMAScript扩展 -6 【前端缓存数据设计、前端缓存池】

最新推荐文章于 2024-05-13 13:41:28 发布

可乐雪碧薄荷糖

最新推荐文章于 2024-05-13 13:41:28 发布

阅读量277

点赞数

分类专栏： ECMAScript 文章标签： js

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/109801268

版权

ECMAScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一.重点代码

实现缓存池思路

声明对象缓存池变量，在ajax请求时以page页数作为键名存储，再在click事件中判断需要ajax还是缓存池

function getAjaxData(){
        $.ajax({
            url: 'http://study.jsplusplus.com/Lfcourses/getCourses',
            type: 'POST',
            dataType: 'JSON',
            data: {
                page: page
            },
            success: function(data){
                oLoading.style.display = 'block'
                t = setTimeout(function(){
                     oLoading.style.display = 'none'
                     cache[page] = data;
                     render(data)
                },500)

            },
            error: function(){
                alert('获取错误')
            }
        })
    }
    function getCacheData(){
        var data = cache[page];
        render(data);
    }
    cache[page] ? getCacheData() : getAjaxData();

两栏布局思路

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

封装ajax

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

        })
    }