缓存函数的简单使用

编程三昧

关注

发布于: 3 小时前

前言

缓存是一种重要的程序优化手段，一般采用以空间换时间的措施来提高程序性能，常用的缓存方法有浏览器缓存、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 即可得到数据，大大提高了代码复用率。

总结

以上就是使用缓存函数的一个简单用例！

~本文完，感谢阅读！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！
你来，怀揣期望，我有墨香相迎！你归，无论得失，唯以余韵相赠！
知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！

发布于: 3 小时前阅读数: 3

原文链接:【http://xie.infoq.cn/article/600a35303845228b92031dabb】。

编程三昧

关注

学习有趣的知识，塑造有趣的灵魂！ 2019.08.30 加入

还未添加个人简介

发布

暂无评论

创作场景

缓存函数的简单使用

前言

场景

实现一

实现二

总结

编程三昧

评论