106

backbone.js スクリーンキャストからの優れた peepcode デモ コードを調べています。その中で、バックボーン コードはすべて、jQuery オブジェクトに渡される無名関数に含まれています。

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

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

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

最初のアプローチのポイント/利点は何ですか? このようにすると、無名関数が作成され、jQuery オブジェクトが関数引数として渡されてすぐに実行され、実質的に $ が jQuery オブジェクトであることが保証されます。これが唯一のポイントですか-jQueryが「$」にバインドされていることを保証するためですか、それともこれを行う他の理由がありますか?

4

5 に答える 5

187

あなたが示した 2 つのコード ブロックは、実行するタイミングと理由が劇的に異なります。それらは互いに排他的ではありません。それらは同じ目的を果たしません。

JavaScript モジュール


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

これは「JavaScript モジュール」パターンであり、すぐに呼び出す関数で実装されます。

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

これの実装は、呼び出し(jQuery)括弧によってすぐに呼び出される関数です。jQuery を括弧内に渡す目的は、グローバル変数にローカル スコープを提供することです。これにより、変数を検索するオーバーヘッドの量が削減さ$れ、場合によってはミニファイアの圧縮/最適化が向上します。

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

jQueryの「DOMReady」機能

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


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

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

モジュールとバックボーン コードの DOMReady

バックボーン コードを jQuery の DOMReady 関数内で定義するのは不適切な形式であり、アプリケーションのパフォーマンスを損なう可能性があります。この関数は、DOM がロードされて操作できる状態になるまで呼び出されません。つまり、オブジェクトを定義する前に、ブラウザーが DOM を少なくとも 1 回解析するまで待機しているということです。

DOMReady 関数の外で Backbone オブジェクトを定義することをお勧めします。私は、とりわけ、コードのカプセル化とプライバシーを提供できるように、JavaScript モジュール パターン内でこれを行うことを好みます。私は、自分のモジュールの外部で必要なビットへのアクセスを提供するために、「Revealing Module」パターン (上記の最初のリンクを参照) を使用する傾向があります。

DOMReady 関数の外部でオブジェクトを定義し、それらを参照する方法を提供することで、ブラウザーが JavaScript の処理を​​有利に開始できるようになり、ユーザー エクスペリエンスが高速化される可能性があります。また、物事を移動するときにDOMREADy関数をさらに作成することを心配することなく、物事を移動できるため、コードがより柔軟になります。

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

この例は Web でたくさん見つかりますが、モジュールと 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();
});
于 2012-04-29T13:20:20.343 に答える
14

マイナーな補足として、匿名関数への引数として $ を送信すると、$ 関数が頻繁に呼び出された場合にパフォーマンスにわずかなプラスの影響を与える $ がその関数に対してローカルになります。これは、javascript が最初に変数のローカル スコープを検索し、次にウィンドウ スコープ ($ が通常存在する場所) までたどるからです。

于 2012-04-30T09:23:33.797 に答える
9

使用された場合でも、そのクロージャー内で常に使用できるようにします。$$.noConflict()

この閉鎖がなければ、ずっとjQuery代わりに使用することになって$います。

于 2012-04-29T10:56:43.850 に答える
4

$ 変数の潜在的な競合を回避するためです。他の何かが $ という名前の変数を定義している場合、プラグインは間違った定義を使用する可能性があります

詳細については、 http://docs.jquery.com/Plugins/Authoring#Getting_Startedを参照してください。

于 2012-04-29T10:55:31.690 に答える