用Javascript鏈接的回調可讀性？

Question

編寫一系列深度嵌套的回調的最佳方法是什么？

您有幾個函數，每個函數執行一個異步操作，並且取決於先前函數的輸出。 對於兩個函數，這通常看起來像foo(bar) 。

一連串的回調看起來像foo(bar(baz(qux(...)))) 。 這很快變得很難閱讀，更不用說維護了。 特別是一旦您開始將其他參數傳遞給函數調用！ 步驟對此有所改進，但是在每個函數調用中添加了一個額外的參數。

這篇文章 （第3.1節）建議了一個wait函數，其用法如下： wait(foo, qux)並支持多個依賴項，例如： wait([foo, bar, baz], qux) 。 不幸的是，這對嵌套回調沒有幫助。

一步一步等待都可以幫助一點，但似乎都不是理想的選擇。 有沒有更好的方法編寫較長的回調鏈？

Answer 1

在函數式編程中，存在函數調用compose，該函數從兩個函數fog = f(g(x))創建新的函數組合

function compose(f, g) {
   return function() {
      //apply is use to pass multiple arguments to function g
      return f(g.apply(null, Array.prototype.slice.call(arguments, 0)));
   };
}

如果您具有歸約功能，也可以從功能編程范例中進行。

// this function need at least 2 arguments and it don't check if you pass 
// one element array or empty array.
function reduce(fun, array) {
    var result = fun(array[0], array[1]);
    for (var i=2; i<array.length; ++i) { 
        result = fun(result, array[i]);
    }
    return result;
}

您可以使用上述兩個創建鏈功能

function chain() {
    return reduce(compose, arguments);
}

您可以使用鏈來創建新功能，它是功能鏈

var quux = chain(foo, bar, baz);//quux is function that call foo(bar(baz(...)));

您也可以將此作為參數作為回調傳遞給另一個函數

some_function(chain(foo, bar, baz, quux));

在這種情況下，some_function獲取回調函數作為參數。

Answer 2

內聯函數雖然整潔並且可以更清晰，但有時可以在對象常量中明確定義一個方法，例如在對象常量內進行定義，然后對這些方法的引用更易於維護和重用。

這是一個簡單的示例，但通常是我傾向於構造回調的方式。

container = {};
container.method = function(arg) {
    //do your thing
    return container.method2(arg) ;
};
container.method2 = function(arg) {
    return function() {
        // work with arg, etc
    };
};
$('#element').click(container.method);

Answer 3

考慮使用這樣的東西...

//Prepare a command graph
var fn = {};
fn["getAccount"] = function(){$.ajax(url, fn["getAccount.success"], fn["getAccount.failure"]);};
fn["getAccount.success"] = function(data){fn["getTransaction"]();};
fn["getAccount.failure"] = function(){fn["displayError"]();};
fn["getTransaction"] = function(){$.ajax(url, fn["getTransaction.success"], fn["getTransaction.failure"]);};
fn["getTransaction.success"] = function(data){fn["displayData"];};
fn["getTransaction.failure"] = function(){fn["displayError"]();};

//Initiate the command graph
fn["getAccount"](data);

我不知道為什么，但是我真的不喜歡變量名和函數名的下划線。