jQuery - 代碼結構 - 功能裏面的功能

Question

目前我正在試圖通過更注重結構&模式來編寫更好的代碼。出於興趣，我開始看看其他人的代碼，看看他們是如何構建它的。我多次遇到的一種「模式」是這樣的：

function foo(a, b) { 

    function bar() { 
     // do something with a & b 
    } 

    bar(); 

    // event handler, e.g. resize 
    $(window).on('resize', bar); 
} 

$(document).ready(function() { 

    foo(a, b); 
}); 

因此，定義了一個函數，兩個值被傳遞給該函數。在那個函數中，另一個函數被定義在用這兩個值完成某事的地方。第二個函數然後附加到事件處理程序（resize事件僅僅是一個示例）。最後，當DOM準備就緒時，外部函數被觸發。

爲什麼人們這樣寫他們的代碼，只是爲了保持文檔準備好的功能很乾淨？或阻止人們綁定功能到另一個事件？也許它與可變範圍有關？

此外，爲什麼在附加事件處理程序之前觸發bar，這是某種類型的init來設置值，然後只在特定事件發生時才調整它們？

Answer 1

是的是乾的，圖像的例子：功能欄例如設置寬度或計算一些其他元素的寬度，他是immedly調用，計算初始寬度。但是當窗口調整大小時，您必須重新計算，以便將該函數綁定到事件調整大小。

在功能放功能很好的例子就是模塊的模式： link to good free ebook to learn javascript patterns