前言缓存是程序优化的重要手段。一般采用以空间换时间的方式来提高程序性能。常用的缓存方式有浏览器缓存和HTTP缓存。场景假设有这样一个简单的场景：后台返回一组数据给前端显示。考虑到页面的性能，前端需要分页显示。下面我们根据这个场景的需求来做一个代码实现。实现一个很常规的实现：//假设后台返回的数据是一个数组，存储在datafunctiongetPagerData(pageNumber,pageSize){returndata.slice(pageSize*(pageNumber-1),pageSize*pageNumber);}每点击一个页码，都要调用getPagerData方法计算要显示的数据。如果数据长度不大，那么每次计算应该很快。一旦数据长度很大，每次计算显示数据的速度就没那么乐观了。为了性能和显示体验，后台一次性推送数据。导致前端显示由于数据的计算和显示而变慢。实现2既然实现了分页功能，就意味着用户可以点击任意页面的页码。如果采用“实现一”中的方案，即使之前已经展示过的数据，如果用户想要再次展示，还是需要重新计算。这将需要大量的重复性工作，这确实会影响性能。你。现在我们做这样的优化：functiondataController(){letcatchData=newMap();返回函数（pageNumber，pageSize）{如果（！catchData.has（pageNumber））{catchData.set（pageNumber，data.slice（pageSize*（pageNumber-1），pageSize*pageNumber））;}返回catchData.get(pageNumber);};}让getPagerData=dataController();之后，每次用户点击页码，我们只需要调用如下：constdata=getPagerData(pageNumber,pageSize);但是，作为一个有抱负的新时代程序员，我们会发现一个问题：上面的dataController只适用于这个特定的场景，没有复用性！这一行必须要改，于是就有了下面这个方法：functiondataController(fn){letcatchData=newMap();返回函数(...args){如果(!catchData.has(args[0])){catchData.set(args[0],fn(...args));}返回catchData.get(args[0]);}}functiongetPagerData(pageNumber,pageSize){returndata.slice(pageSize*(pageNumber-1),pageSize*pageNumber);}letgetData=dataController(getPagerData);之后每次需要数据的时候，可以这样调用：letdata=getData(pageNumer,pageSize);将拦截数据的具体方法作为参数传入。如果后面有不同的拦截逻辑，只需要封装成一个函数，传入dataController中获取数据即可，大大提高了代码复用率。以上就是一个简单的使用缓存功能的例子！~~本文到此结束，感谢阅读！~学习有趣的知识，认识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者王隐，我的公众号是《编程三昧》，欢迎关注，希望大家多多指教！你来，怀揣期待，我以墨香迎接你！您归来，不分得失，只送回味！知识与技能并重，内功与外功并重，理论与实践两手抓，两手都要用力！
