The concept is introduced

The memo mode simply means that data that needs to be acquired later is saved for the first time without breaking the existing logic, so as to avoid repetitive and inefficient operations. The primary task of this design pattern is to cache existing data or state for use or recovery at some point in the future.

Application scenarios

First in javascript programming, our application is often through a browser client sends a request to the server to retrieve data, and the process of request tend to consume a certain amount of time and flow rate, repeated requests of repetitive data not only increased the pressure from the server, also can cause the browser to request data of waiting will affect the user experience. Therefore, as a forced programmer, there is a comparison of this performance optimization. Here are some common application scenarios.

1. Data cache during paging

We request a long list, for example, you need to do paging, so every time we switch the paging will request once again, we will see how to optimize the first paging request data cache, switch to the page again the next time when we will first determine whether there is the data in the cache object, if you have go directly to the cache, not just a request, The current data is stored in the cache corresponding to the number of pages.

2. Cache when content is loaded lazily

In order to improve the first screen page rendering time, we tend to use lazy loading way, such as lazy loading images, lazy loading content data, its principle and paging, such as when the user dropdown show more data, such as when the user switches page and then switch back, before we can request data cache, instead of request once again, unless the user manual refresh.

3. Website peels

Websites and is one of the more commonly used functions, such as visualization of sites, all kinds of website building sites, are now find a way of what you see is what you get, this can be one step closer to improve the user experience, to ordinary change user interface style and the style, also need to provide the user to cancel the function, then use memo mode is better, It allows the user to save the configuration parameters of the previous step without requesting the back-end interface, which greatly improves the user experience and site performance for high-frequency operations.

4. Other

For example, the common configuration of the system, the caching of user browsing records, the caching of routes, etc., can be used to improve the performance of memos, the most common is vue-router, we can use keep-alive to cache routes, in fact, the principle is similar, and so on. Your website will have more room to optimize.

Basic implementation

Based on the above scenario analysis and discussion, we can abstract a common caching method to deal with data caching in different scenarios. The code is as follows:

const baseOperateController = function() {
    // Cache objects
    const cache = {};
    // Base function
    return function(params, fn, cb) {
        // Check whether it is in the cache
        if(cache[params]) {
            // Read from the cache and pass it to the business function
            fn(cache[params])
        }else {
            // If there is no cache, control is transferred to the external callback function and the corresponding parameters are passed
            cb && cb(params).then((res= > {
                cache[params] = res.data;
            })).catch(err= > console.log(err))
        }
    }
}()

/ / use
baseOperateController(params, showView, asyncFn)
Copy the code

The last

If you want to learn more about webpack, node, gulp, CSS3, javascript, nodeJS, Canvas and other front-end knowledge and actual practice, welcome to join us in the public account “Interesting Talk front-end” to learn and discuss, and jointly explore the boundary of the front-end.

More recommended

  • “Front End Combat Summary” using postMessage to achieve pluggable cross-domain chatbot
  • “Front-end combat summary” of the variable promotion, function declaration promotion and variable scope detailed explanation
  • “Front-end combat summary” how to change the URL without refreshing the page
  • A picture shows you how to play vue-Cli3 quickly
  • Vue Advanced Advanced series – Play with Vue and vuex in typescript
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (Part 1)
  • Implementing a CMS full stack project from 0 to 1 based on nodeJS (middle)
  • Implement a CMS full stack project from 0 to 1 based on nodeJS (Part 2)
  • “Javascript advanced programming” core knowledge summary
  • With CSS3 to achieve stunning interviewers background that background animation (advanced source)
  • Teach you to use 200 lines of code to write a love bean spell H5 small game (with source code)
  • Write a mock data server using nodeJS in 5 minutes