JavaScript Patterns 4.2 Callback Pattern

JavaScript Patterns 4.2 Callback Pattern
function writeCode(callback) {

    // do something...

    callback();

    // ...

}

function introduceBugs() {

    // ... make bugs

}

writeCode(introduceBugs); 
JavaScript Patterns 4.2 Callback Pattern

A Callback Example

JavaScript Patterns 4.2 Callback Pattern
// refactored findNodes() to accept a callback

var findNodes = function (callback) {

    var i = 100000,

          nodes = [],

          found;

    // check if callback is callable

    if (typeof callback !== "function") {

        callback = false;

    }

    while (i) {

        i -= 1;

        // complex logic here...

        // now callback:

        if (callback) {

            callback(found);

        }

        nodes.push(found);

    }

    return nodes;

};
JavaScript Patterns 4.2 Callback Pattern

Callbacks and Scope

JavaScript Patterns 4.2 Callback Pattern
var myapp = {};

myapp.color = "green";

myapp.paint = function (node) {

    node.style.color = this.color;

};
JavaScript Patterns 4.2 Callback Pattern

The function findNodes() does something like this:

JavaScript Patterns 4.2 Callback Pattern
var findNodes = function (callback) {

    // ...

    if (typeof callback === "function") {

         callback(found);

    }

    // ...

};
JavaScript Patterns 4.2 Callback Pattern

If you call findNodes(myapp.paint), it won’t work as expected, because this.color will not be defined. The object this will refer to the global object, because findNodes() is a global function. If  findNodes() were a  method  of  an  object  called  dom (like dom.findNodes()), then this inside of the callback would refer to dom instead of the expected myapp.

 

pass the callback function and in addition pass the object this callback belongs to

JavaScript Patterns 4.2 Callback Pattern
findNodes(myapp.paint, myapp);


var findNodes = function (callback, callback_obj) {

    //...

    if (typeof callback === "function") {

        callback.call(callback_obj, found);

    }

    // ...

};
JavaScript Patterns 4.2 Callback Pattern

pass the method as a string

JavaScript Patterns 4.2 Callback Pattern
findNodes("paint", myapp);

var findNodes = function (callback, callback_obj) {

    if (typeof callback === "string") {

        callback = callback_obj[callback];

    }

    //...

    if (typeof callback === "function") {

        callback.call(callback_obj, found);

    }

    // ...

};
JavaScript Patterns 4.2 Callback Pattern

Asynchronous Event Listeners

document.addEventListener("click", console.log, false);

Timeouts
 

JavaScript Patterns 4.2 Callback Pattern
var thePlotThickens = function () {

    console.log(‘500ms later...‘);

};

setTimeout(thePlotThickens, 500);
JavaScript Patterns 4.2 Callback Pattern

Callbacks in Libraries

Focus on core functionality and provide “hooks” in the form of callbacks, which will allow the library methods to be easily built upon, extended, and customized.

JavaScript Patterns 4.2 Callback Pattern,布布扣,bubuko.com

JavaScript Patterns 4.2 Callback Pattern

上一篇:C语言学习(一) 开发环境的搭建


下一篇:linux中c语言errno的使用