Simple concept:

**1. Function corrification: ** A function originally has multiple parameters, only one parameter is passed, a new function is generated, and the new function receives the rest of the parameters to run to get the structure.

**2. Partial function: ** A function originally has multiple parameters, only a part of the parameters, generate a new function, by the new function to receive the rest of the parameters to run the structure.

**3. Higher-order functions: ** A function argument is a function that processes the parameter function to produce a function, which uses the higher-order function

Application of Function Currization in Vue:

Scenario: How to determine whether a tag is a custom tag or an HTML tag?

Vue source code analysis:

 var isNonPhrasingTag = makeMap(
    'address,article,aside,base,blockquote,body,caption,col,colgroup,dd,' +
    'details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,' +
    'h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,' +
    'optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,' +
    'title,tr,track'
);
Copy the code

In fact, Vue saves THE HTML tag in the form of a data, and then searches the array through the tag. If there is an HTML tag, there is no custom tag!

MakeMap function uses the function Corrification: paste source code:

/** * Make a map and return a function for checking if a key * is in that map. */
function makeMap(str, expectsLowerCase) {
    var map = Object.create(null);
    var list = str.split(', ');
    for (var i = 0; i < list.length; i++) {
        map[list[i]] = true;
    }
    return expectsLowerCase
        ? function (val) {
            return map[val.toLowerCase()];
        }
        : function (val) {
            returnmap[val]; }}Copy the code

Use a simplified example to parse the makeMap method and how to use it:


/** * optimization: use the function Currize */

let tags = 'div, p, a, img, ul, li'.split(', ');

function makeMap(keys) {
    let set = {};
    tags.forEach(key= > set[key] = true);   // tags = [div: true, p: true, a: true...]

    return function (tagName) {
        / /!!!!! The negative operation of logical non, double negative equals positive
        return!!!!! set[tagName.toLowerCase()]// true or false}}let isHtmlTag = makeMap(tags) // The function returned

console.log(isHtmlTag('div'))
Copy the code

Run the code on the console and see the result:

1. If it is an HTML tag:

2. If it is a custom label:

The common way to determine whether a tag is an HTML tag is:

let tags = 'div, p, a, img, ul, li'.split(', ');

function isHTMLTag(tagName) {
    tagName = tagName.toLowerCase();
    if (tags.indexOf(tagName) > -1) {
        return true;
    }
    return false;
}

Copy the code

If there are two tags in the page and 10 tags in the tags, we need to compare 20 times; After the use of function keli, there is no need to cycle to judge, only need 2 times to judge, greatly improved performance!