Simple use of cache function

Preface

Caching is an important means of program optimization. Generally, space-for-time measures are used to improve program performance. Commonly used caching methods include browser caching and HTTP caching.

Scenes

Suppose there is a simple scenario: the backend returns a set of data to the frontend for display. Considering the performance of the page, the frontend needs to be displayed in pages.

Let's do a code implementation based on the requirements of this scenario.

Achieve one

Very conventional implementation:

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

Every time the page number is clicked, the getPagerData method must be called to calculate the data that needs to be displayed.

If the length of the data is not large, then each calculation should be fast. Once the length of the data is large, the speed of displaying the data each time is not so optimistic.

For performance and display experience, the background pushes the data. As a result, the display is slow due to the calculation of the display data on the front end. This is a bit unreasonable. The background development may even laugh at the front end for not doing it well.

Realization two

Now that the paging function is implemented, it means that the user can click on the page number of any page. If the solution in "Implementation One" is adopted, even if the data has been displayed before, if the user wants to display it again, he still has to recalculate it. This requires a lot of repetitive work, which really affects the performance. you.

Now we make an optimization like this:

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();

After that, every time the user clicks the page number, we only need to call as follows:

const data = getPagerData(pageNumber, pageSize);

However, as a new-age programmer with ambitions, we will find a problem: the above dataController is only suitable for this specific scenario, there is no reusability! Which line of this must be changed, so there is the following method:

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);

Every time you need data later, you can call it like this:

let data = getData(pageNumer, pageSize);

The specific method of intercepting data is passed in as a parameter. Afterwards, if there is a different interception logic, you only need to seal it as a function and pass it to the dataController to get the data, which greatly improves the code reuse rate.

Summarize

The above is a simple use case of using the cache function!

~

~ End of this article, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and create interesting souls!

Hello everyone, I is [ programming Samadhi 〗 author hermit king , my public number is " programming Samadhi " welcome attention, we hope the exhibitions!

Come, with expectations, I have Moxiang to greet you! You return, regardless of gains or losses, only with the lingering rhyme as a gift!

Pay equal attention to knowledge and skills, both internal and external skills, both theory and practice must be grasped, and both hands must be hard!