《前端实战总结》之设计模式的应用——备忘录模式

概念介绍

备忘录模式简单的说就是在不破坏已有逻辑的前提下，将日后需要获取的数据在第一次保存下来以免造成重复且低效的操作。该设计模式最主要的任务就是对现有数据或者状态做缓存，为将来某个时刻使用或者恢复做准备。

应用场景

首先在javascript编程中，我们的应用往往是通过浏览器端向服务器发送请求来获取数据的，而请求的过程中往往会消耗一定的时间和流量，对重复性数据反复请求不仅增加了服务端的压力，还会造成浏览器端对数据请求的等待进而影响用户体验。因此作为一个有逼格的程序员，有比较对这块性能做出优化。接下来举一些常见的应用场景。

1. 分页时的数据缓存

比如我们请求一个长列表，需要做分页，那么我们每次切换分页都会重新请求一次，为了优化我们可以将第一次的分页请求数据缓存，当下次再切换到这一页的时候我们会先判断缓存对象中是否有该数据，如果有就直接走缓存，没有就发起请求，并将当前的数据存入对应页数的缓存中。

2. 内容懒加载时的缓存

为了提高页面首屏渲染时间，我们往往会使用懒加载的方式，比如图片懒加载，内容数据懒加载，其原理和分页很像，比如在用户下拉时显示更多数据等，当用户切换页面后又切换回来时，我们可以将之前请求的数据缓存，这样就不用再次请求一次了，除非用户手动刷新。

3. 网站换肤

网站换肤也是目前比较常用的功能之一，比如可视化的网站，各种建站网站，目前都在走所见即所得的路子，这样可以更近一步的提高用户体验，需要平凡的改动用户的界面风格和样式，还需要提供用户撤销的功能，那么利用备忘录模式就更好不过了，他可以在用户保存之后可以不请求后端接口的情况下拿到上一步的配置参数，对于高频操作来说，这无疑大大提高了用户体验和网站性能。

4. 其他

比如系统的公共配置，用户浏览记录的缓存，路由的缓存等等，都可以用备忘录模式来提高性能，最常用的就是vue-router，我们可以使用keep-alive来缓存路由，其实原理也是类似的，如此种种，了解了备忘录模式，你的网站就有了更近一步的优化空间。

基本实现

综合以上的场景分析和讨论，我们可以抽象出一个公共的缓存方法来处理不同情景下的数据缓存。代码如下：

const baseOperateController = function() {
    // 缓存对象
    const cache = {};
    // 基础函数
    return function(params, fn, cb) {
        // 判断是否在缓存下
        if(cache[params]) {
            // 从缓存中读取并传递给业务函数
            fn(cache[params])
        }else {
            // 没有缓存则将控制权转移给外部回调函数，并传递相应参数
            cb && cb(params).then((res => {
                cache[params] = res.data;
            })).catch(err => console.log(err))
        }
    }
}()

// 使用
baseOperateController(params, showView, asyncFn)

最后

如果想了解更多webpack，node，gulp，css3，javascript，nodeJS，canvas等前端知识和实战，欢迎在公众号《趣谈前端》加入我们一起学习讨论，共同探索前端的边界。