快取函式的簡單使用

前言

快取是一種重要的程式優化手段，一般採用以空間換時間的措施來提高程式效能，常用的快取方法有瀏覽器快取、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 即可得到資料，大大提高了程式碼複用率。

總結

以上就是使用快取函式的一個簡單用例 ！

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！

本作品採用《CC 協議》，轉載必須註明作者和本文連結