javascript - jQuery - コード構造 - 関数内の関数

Question

現時点では、構造とパターンにもっと注意を払って、より良いコードを書こうとしています。興味から、他の人のコードを調べて、彼らがどのように構造化されているかを確認するようになりました。私が何度も遭遇した 1 つの「パターン」は次のようなものです。

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

したがって、関数が定義され、たとえば 2 つの値がその関数に渡されます。その関数では、2 つの値を使用して何かを行う別の関数が定義されています。次に、その 2 番目の関数がイベント ハンドラーにアタッチされます (サイズ変更イベントは単なる例です)。最後に、DOM の準備が整うと、外側の関数が起動されます。

ドキュメントの準備機能をきれいに保つためだけに、なぜ人々はこのようにコードを書くのでしょうか? または、人々がそこの関数を別のイベントにバインドするのを止めるには? 多分それは変数のスコープと関係がありますか？

また、barイベント ハンドラーがアタッチされる前に起動するのはなぜですか。これは、値を設定し、特定のイベントが発生したときにのみ値を調整するためのある種の初期化ですか?