码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript Patterns 4.2 Callback Pattern

时间:2014-06-09 21:10:47      阅读:301      评论:0      收藏:0      [点我收藏+]

标签:des   c   style   class   blog   code   

bubuko.com,布布扣
function writeCode(callback) {

    // do something...

    callback();

    // ...

}

function introduceBugs() {

    // ... make bugs

}

writeCode(introduceBugs); 
bubuko.com,布布扣

A Callback Example

bubuko.com,布布扣
// 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;

};
bubuko.com,布布扣

Callbacks and Scope

bubuko.com,布布扣
var myapp = {};

myapp.color = "green";

myapp.paint = function (node) {

    node.style.color = this.color;

};
bubuko.com,布布扣

The function findNodes() does something like this:

bubuko.com,布布扣
var findNodes = function (callback) {

    // ...

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

         callback(found);

    }

    // ...

};
bubuko.com,布布扣

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

bubuko.com,布布扣
findNodes(myapp.paint, myapp);


var findNodes = function (callback, callback_obj) {

    //...

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

        callback.call(callback_obj, found);

    }

    // ...

};
bubuko.com,布布扣

pass the method as a string

bubuko.com,布布扣
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);

    }

    // ...

};
bubuko.com,布布扣

Asynchronous Event Listeners

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

Timeouts
 

bubuko.com,布布扣
var thePlotThickens = function () {

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

};

setTimeout(thePlotThickens, 500);
bubuko.com,布布扣

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

标签:des   c   style   class   blog   code   

原文地址:http://www.cnblogs.com/haokaibo/p/callback-patterns.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!