zoukankan      html  css  js  c++  java
  • JavaScript Patterns 4.2 Callback Pattern

    function writeCode(callback) {
    
        // do something...
    
        callback();
    
        // ...
    
    }
    
    function introduceBugs() {
    
        // ... make bugs
    
    }
    
    writeCode(introduceBugs); 

    A Callback Example

    // 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;
    
    };

    Callbacks and Scope

    var myapp = {};
    
    myapp.color = "green";
    
    myapp.paint = function (node) {
    
        node.style.color = this.color;
    
    };

    The function findNodes() does something like this:

    var findNodes = function (callback) {
    
        // ...
    
        if (typeof callback === "function") {
    
             callback(found);
    
        }
    
        // ...
    
    };

    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

    findNodes(myapp.paint, myapp);
    
    
    var findNodes = function (callback, callback_obj) {
    
        //...
    
        if (typeof callback === "function") {
    
            callback.call(callback_obj, found);
    
        }
    
        // ...
    
    };

    pass the method as a string

    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);
    
        }
    
        // ...
    
    };

    Asynchronous Event Listeners

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

    Timeouts
     

    var thePlotThickens = function () {
    
        console.log('500ms later...');
    
    };
    
    setTimeout(thePlotThickens, 500);

    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.

  • 相关阅读:
    PHP框架 CI与TP之MVC比较
    多线程设计要点
    BigPipe 的工作原理
    Linux yum命令的使用技巧
    java 乱码问题
    win7或xp下常用命令
    不同场景下JVM参数的设置
    win7笔记本创建wifi热点
    maven编译出现Java heap space
    Curling 2.0——蛋疼的一道题
  • 原文地址:https://www.cnblogs.com/haokaibo/p/callback-patterns.html
Copyright © 2011-2022 走看看