Simple use of cache functions

Preface

Caching is an important means of program optimization , Generally, space for time is used to improve program performance , The common caching methods are browser caching 、HTTP Cache, etc .

scene

Suppose there is such a simple scenario ： The background returns a group of data to the front end for display , Considering the page performance problem , The front end needs pagination to display .

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

Achieve one

Very conventional implementation ：

//  Suppose the data returned in the background is an array , There is  data  in 
function getPagerData(pageNumber, pageSize) {
    return data.slice(pageSize * (pageNumber - 1), pageSize * pageNumber);
}

Every time you click the page number , Call the getPagerData Method to calculate the data to be displayed .

If data The length of the is not large , Then every calculation should be fast , once data The length of , Then the speed of displaying data in each calculation is not so optimistic .

For performance and demonstration experience , The background pushes the data , As a result, the front-end display is slow due to the calculation of display data , That's a bit of a mystery , Background development may even suck at the front end .

Achieve two

Now that the paging function is done , That means users can click on the page number of any page . If the “ Achieve one ” Plan in , Even the data that has been displayed before , If the user wants to show again , You still have to recalculate , This requires a lot of repetitive work , It really affects your performance .

Now let's do such an optimization ：

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

Then every time the user clicks the page number , We just need to call as follows ：

const data = getPagerData(pageNumber, pageSize);

However , As a new era programmer with pursuit and ambition , We'll find a problem ： above dataController Only for this specific scenario , No reusability ！ What's the line , Must change , So we have 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);

Then every time you need data , Can be called like this ：

let data = getData(pageNumer, pageSize);

The specific method of intercepting data is passed in as a parameter , Then if there are different interception logic , You just need to pass... As a function dataController You can get the data , Greatly improve the code reuse rate .

summary

The above is a simple use case for using the cache function ！

~

~ The end of this paper , Thank you for reading ！

~

Learn interesting knowledge , Make interesting friends , Create interesting souls ！

Hello everyone , I am a 〖 The samadhi of programming 〗 The author of Hermit King , My official account is 『 The samadhi of programming 』, Welcome to your attention , I hope you can give me more advice ！

You come to , With expectations , I have ink to greet ！ You go back , No matter gain or loss , Only with lingering charm ！

Knowledge and skills are equally important , Both internal and external skills , We should grasp both theory and practice 、 Hard on both hands ！