JS callback mode

JS callback mode

1. Callback example

If there is a module findeNodes(), the task is to find the desired DOM element and use the hide()process:

function findNodes() {
    var i = 10000, nodes = [], found
    while (i--) {
       //...complex logic, filter out the matching elements found
        nodes.push(found)
    }
    return nodes
}

function hide(nodes) {
    for (let i = 0, max = nodes.length; i <max; i++) {
        nodes[i].style.display ='none'
    }
}
hide(findNodes())

2. Improvement

We can see the function findNodes()and hide()were twice the cycle, which is very inefficient, if you want to avoid repeating this cycle, and as long as findNodes()it is carried out when selected hide()it will be efficient implementation. If findNodes()implemented logic modification, since the retrieval logic is coupled and modified, it will no longer be a general function. The solution to this problem is to adopt the callback mode .

Hidden node logic can be passed to the callback function in the manner findNodes()and entrusted to the Executive:

function findNodes(callback) {
    var i = 10000, nodes = [], found

    if (typeof callback !=='function') {//Check whether the parameter is callable
        callback = false
    }

    while (i--) {
       //...complex logic, filter out the matching elements found
        if (callback) {
            callback(found)
        }
        nodes.push(found)
    }
    return nodes
}

function hide(nodes) {
    nodes[i].style.display ='none'
}

findNodes(hide)

So now the callback function optional, add the callback function parameters after reconstruction findNodes()can still be used as before, without destroying the original code of the old API.

3. Callback and scope

In the previous example, the callback is executed statements: callback(para)effective in most cases, but if the function is passed an object and there is a method thisthat in the method of the callback thiswill point to the global object, such accidents.

The solution to this problem is to pass a callback function, and also pass the object to which the callback function belongs:

function findNodes (callback, callback_obj){
    ...
    if (typeof callback ==='function'){
        callback.call(callback_obj, found)
    }
    ...
}
findNodes (obj.sayName, obj)

Of course, you can pass the method as a string to avoid typing the name of the object twice:

findNodes (callback, callback_obj){
    if (typeof callback ==='string'){
        callback = callback_obj[callback]
    }
    if (typeof callback ==='function'){
        callback.call(callback_obj, found)
    }
}
findNodes('sayName', Obj)

This article is a series of articles, you can refer to each other to confirm and make progress together~

  1. JS abstract factory pattern
  2. JS factory pattern
  3. JS builder mode
  4. JS prototype mode
  5. JS singleton mode
  6. JS callback mode
  7. JS appearance mode
  8. JS adapter mode
  9. JS uses higher-order functions to implement function caching (memo mode)
  10. JS state mode
  11. JS bridge mode
  12. JS observer mode

Most of the posts on the Internet are of different depths, and even some are inconsistent. The articles below are summaries of the learning process. If you find errors, please leave a message to point out~

Reference: <JavaScript Mode> P65

Reference: https://cloud.tencent.com/developer/article/1356689 JS callback mode-Cloud + Community-Tencent Cloud