[解決済み] なぜ無名関数を定義して、引数としてjQueryを渡すのか？

質問

backbone.jsのスクリーンキャストにある素晴らしいpeepcodeのデモコードに目を通しています。その中で、バックボーン コードはすべて、jQuery オブジェクトを渡される匿名関数で囲まれています。

(function($) {
  // Backbone code in here
})(jQuery);

私自身のバックボーンコードでは、すべてのコードをjQuery DOMの'ready'イベントでラップしています。

$(function(){
  // Backbone code in here
});

最初のアプローチのポイント/利点は何でしょうか？この方法で無名関数を作成すると、関数の引数として渡されたjQueryオブジェクトが直ちに実行され、$がjQueryオブジェクトであることが効果的に保証されます。これは、jQueryが'$'にバインドされていることを保証するため、またはこれを行う他の理由があるため、唯一のポイントでしょうか？

どのように解決するのですか？

表示された 2 つのコード ブロックは、いつ、なぜ実行されるかが劇的に異なっています。これらは互いに排他的ではありません。これらは同じ目的を果たすものではありません。

JavaScript モジュール

(function($) {
  // Backbone code in here
})(jQuery);

これは、即座に呼び出される関数で実装された "JavaScript Module" パターンです。

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
• http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

このコードの目的は、あなたのコードに "モジュール性"、プライバシー、およびカプセル化を提供することです。

この実装は、呼び出した関数から即座に呼び出される (jQuery) という括弧で囲まれています。括弧の中にjQueryを渡す目的は、グローバル変数へのローカルスコープを提供することです。これにより、グローバル変数の検索にかかるオーバーヘッドを軽減することができます。 $ 変数を探すオーバーヘッドを減らすことができ、場合によってはミニフィアの圧縮や最適化をよりよく行うことができるようになります。

即座に呼び出される関数は、そう、即座に実行されます。関数の定義が完了するとすぐに、その関数が実行されます。

jQueryの"DOMReady"関数

これはjQueryの"DOMReady"関数のエイリアスです。 http://api.jquery.com/ready/

$(function(){
  // Backbone code in here
});

jQuery の "DOMReady" 関数は、DOM が JavaScript コードによって操作される準備ができたときに実行されます。

BackboneコードにおけるモジュールとDOMReadyの比較

jQuery の DOMReady 関数の内部で Backbone コードを定義するのは悪い形式であり、アプリケーションのパフォーマンスに損害を与える可能性があります。この関数は、DOMが読み込まれ、操作できるようになるまで呼び出されることはありません。つまり、オブジェクトを定義する前に、ブラウザが少なくとも一度はDOMを解析するまで待つということです。

DOMReady関数の外側でBackboneオブジェクトを定義するのがより良いアイデアです。私は、他の多くの人々と同様、これをJavaScriptモジュールパターンの内部で行うことを好み、コードのカプセル化とプライバシーを提供できます。私は、モジュールの外側の必要なビットにアクセスするために、quot;Revealing Module"パターン（上記の最初のリンクを参照）を使用することがよくあります。

DOMReady 関数の外側でオブジェクトを定義し、それらを参照する何らかの方法を提供することにより、ブラウザが JavaScript を処理する際に先手を打つことができ、潜在的にユーザー エクスペリエンスを高速化することが可能になります。また、オブジェクトを移動するときに DOMREady 関数をさらに作成することを心配することなく、オブジェクトを移動できるため、コードがより柔軟なものになります。

たとえBackboneオブジェクトを別の場所で定義したとしても、DOMReady関数を使用する可能性があります。その理由は、多くのBackboneアプリが何らかの方法でDOMを操作する必要があるからです。これを行うには、DOMの準備が整うまで待つ必要があり、したがって、アプリケーションの定義後にDOMReady関数を使用してアプリケーションを開始する必要があります。

この例はウェブ上でたくさん見つかりますが、ここではモジュールと DOMReady 関数の両方を使用した、非常に基本的な実装を紹介します。

// Define "MyApp" as a revealing module

MyApp = (function(Backbone, $){

  var View = Backbone.View.extend({
    // do stuff here  
  });

  return {
    init: function(){
      var view = new View();
      $("#some-div").html(view.render().el);
    }
  };

})(Backbone, jQuery);



// Run "MyApp" in DOMReady

$(function(){
  MyApp.init();
});