乐趣区

关于javascript:缓存函数的简单使用

前言

缓存是一种重要的程序优化伎俩,个别采纳以空间换工夫的措施来进步程序性能,罕用的缓存办法有浏览器缓存、HTTP 缓存等。

场景

假如有这样一个简略场景:后盾返给前端一组数据做展现,思考到页面性能问题,前端须要分页来显示。

咱们就这个场景需要来做一下代码实现。

实现一

十分惯例的实现形式:

// 假如后盾返回的数据是一个数组,存在 data 中
function getPagerData(pageNumber, pageSize) {return data.slice(pageSize * (pageNumber - 1), pageSize * pageNumber);
}

每次点击页面页码时,都要调用 getPagerData 办法来计算出所须要展现的数据。

如果 data 的长度不大,那每次计算应该都很快,一旦 data 的长度较大,那每次计算展现数据的速度就不是那么乐观了。

为了性能和展现的体验成果,后盾都将数据一把推了,后果前端因为计算显示数据而导致展现慢,这就有点说不过去了,后盾开发说不定还会讥笑前端不给力呢。

实现二

既然做了分页性能,那就意味着用户能够点击任何一页的页码。如果采纳“实现一”中的计划,那即便是之前曾经显示过的数据,如果用户想要再次展现,还是要从新计算一遍才行,这要就做了很多重复性的工作,切实是影响性能你。

当初咱们做一个这样的优化:

function dataController() {let catchData = new Map();
    return function (pageNumber, pageSize) {if (!catchData.has(pageNumber)) {catchData.set(pageNumber, data.slice(pageSize * (pageNumber - 1), pageSize * pageNumber));
        }
        return catchData.get(pageNumber);
    };
}

let getPagerData = dataController();

之后用户每次点击页码时,咱们只须要如下调用即可:

const data = getPagerData(pageNumber, pageSize);

然而,作为一名有谋求有抱负的新时代程序员,咱们会发现一个问题:下面的 dataController 只实用于这一种特定场景,没有可复用性!这哪行,必须改,于是有了上面这个办法:

function dataController(fn) {let catchData = new Map();
    return function (...args) {if (!catchData.has(args[0])) {catchData.set(args[0], fn(...args));
        }
        return catchData.get(args[0]);
    }
}

function getPagerData(pageNumber, pageSize) {return data.slice(pageSize * (pageNumber - 1), pageSize * pageNumber);
}

let getData = dataController(getPagerData);

之后每次须要数据的时候,都能够这样调用:

let data = getData(pageNumer, pageSize);

将具体截取数据的办法当做参数传入,之后如果有不同的截取逻辑,只须要封为函数传入 dataController 即可失去数据,大大提高了代码复用率。

总结

以上就是应用缓存函数的一个简略用例!

~

~ 本文完,感激浏览!

~

学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王 ,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!

你来,怀揣冀望,我有墨香相迎!你归,无论得失,唯以余韵相赠!

常识与技能并重,内力和外功兼修,实践和实际两手都要抓、两手都要硬!

退出移动版