web-dev-qa-db-ja.com

$（ 'document'）。readyの場合のjQueryのベストプラクティス

私はjQueryのベストプラクティスを調査していて、 this 記事 Greg Franko を見つけました

通常、私はします：

$("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
});

しかし、記事は以下を使用することを推奨しています：

// IIFE - Immediately Invoked Function Expression
(function($, window, document) {

    // The $ is now locally scoped 

    // Listen for the jQuery ready event on the document
    $(function() {

        // The DOM is ready!

    });

    // The rest of the code goes here!

}(window.jQuery, window, document));
// The global jQuery object is passed as a parameter

そこでコメントを見ることができますが、正確に何を言っているのかわかりませんでした。

それで、どちらがより良いアプローチで、なぜですか？

私は両方の方法が機能することを知っていますが、2番目の方法はどのようにしてbetterになりますか？

javascriptjquerydesign-patternscode-standards
35
Red

すぐに呼び出される関数式（IIFE）

IIFEは、グローバル変数/プロパティをローカルにスコープし、JavaScriptコードベースを外部の干渉（サードパーティのライブラリなど）から保護するための理想的なソリューションです。多くの異なる環境（jQueryプラグインなど）で実行されるjQueryコードを記述している場合は、IIFEを使用してjQueryのローカルスコープを設定することが重要です。誰もが$を使用してjQueryのエイリアスを設定しているとは限らないためです。以下にその方法を示します。

   // IIFE - Immediately Invoked Function Expression
  (function($, window, document) {
      // The $ is now locally scoped

      // The rest of your code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter

IIFEに渡すグローバル変数/プロパティを確認するためにソースファイルの下部までスクロールする必要がない場合は、次のようにします。

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The rest of your code goes here!

      }
  ));

IIFEの詳細については、私のブログ投稿 I Love My IIFE を参照してください。

jQuery Readyイベント

多くの開発者は、次のようにすべてのコードをjQuery readyイベント内にラップします。

   $("document").ready(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

または、次のような短いバージョン：

   $(function() {
      // The DOM is ready!
      // The rest of your code goes here!
  });

上記のいずれかのパターンを実行している場合は、readyイベントハンドラーの外で、DOMに依存しないアプリケーションの一部（メソッドなど）を移動することを検討する必要があります。このような：

   // IIFE - Immediately Invoked Function Expression
  (function(yourcode) {

      // The global jQuery object is passed as a parameter
      yourcode(window.jQuery, window, document);

      }(function($, window, document) {

          // The $ is now locally scoped 
          $(function() {

              // The DOM is ready!

          });

          // The rest of your code goes here!

      }
  ));

すべてが単一のイベントハンドラーコールバック関数内にラップされる必要がないため、このパターンはロジックを分離するのが簡単（コード設計の観点から）。また、すぐにすべてを初期化する必要があるわけではないため、アプリケーションのページ読み込みパフォーマンスを向上させるになります。これの良い例はlazy binding DOM event handlersで、DOMの準備ができているときにバインドする必要はありません。

私のjQueryベストプラクティスブログの投稿から転載： http://gregfranko.com/blog/jquery-best-practices/

47
Greg Franko

コードと「推奨」アプローチとの唯一の違いは、互換性とおそらくより良い圧縮です。速度の違いはありません。

IIFE（すぐに呼び出される関数式）の最初の引数としてwindow.jQueryを渡し、IIFE内で$という名前を付けると、グローバル$に割り当てられている他のライブラリに干渉することなくjQueryを使用できます。グローバルな$に自分自身を割り当てる他のライブラリを使用しない場合、IIFEの最初の引数は目的を果たしません。

IIFEにwindowとdocumentを渡すと、JS縮小機能がコードを次のようなもの（空白なし）に変換できるようになり、圧縮率がわずかに向上します。

(function(a, b, c) {
    a(c).ready(function() {
        // ...
    });
})(window.jQuery, window, document);

windowとdocumentを広範囲に使用しない限り、私は次のようにします。

;(function($) {
    $(function() {
        ...
    });
})(jQuery);
16
Blender

  1. $(function(){})は$('document').ready(function(){});と同等です。どちらを使用するかはあなた次第ですが、後者は2つのうちの古い方であり、起動するのにより冗長です。

  2. リストした2番目のアプローチは、グローバル変数を回避する明示的な試みであり、既知のグローバル$、window、およびdocumentを挿入します。これは、グローバルがいかに簡単に導入できるかを認識し、ページに挿入するコードについて可能な限りクリーンルームにするために推奨されます。また、示されているコメントに従う場合、2番目のアプローチは最初のアプローチと同等ではないことに注意してください。 $は引数として挿入されるため、このコードは$記号を所有することを希望する他のライブラリと互換性があります。

特に、// The rest of the code goes hereは、ドキュメントの準備ができる前、またはそのイベントが発生したときに実行される可能性がある場所にあります。 $に渡された関数の中に入れます。

5
dwerner

あなたのリンクにはアンサーがあります：

以下は結構です、

コードが実行される環境がわかっている場合。

ページの読み込みパフォーマンスを気にしない場合。

あなたがベストプラクティスを気にしない場合。

 $("document").ready(function() {
    // The DOM is ready!
    // The rest of the code goes here
  });

ただし、コードを実行する環境がわからない場合や、

ページ読み込みパフォーマンスの向上

// IIFE - Immediately Invoked Function Expression
  (function($, window, document) {

    // The $ is now locally scoped 

   // Listen for the jQuery ready event on the document
   $(function() {

     // The DOM is ready!

   });

   // The rest of the code goes here!

  }(window.jQuery, window, document));
  // The global jQuery object is passed as a parameter
3
Balaji Kandasamy

$をjQueryのエイリアスとして使用する場合

   $(document).ready(function(){})

と同じ

  (function($, window, document) {

  // The $ is now locally scoped 

 // Listen for the jQuery ready event on the document
  $(function() {

    // The DOM is ready!

  });

  // The rest of the code goes here!

 }(window.jQuery, window, document));

以前の回答で指摘したように、2番目のメソッドは、jQueryオブジェクトを即時に呼び出された関数式に渡すため、jQueryに$エイリアスを自由に使用できないようにします。名前空間。

つまり、最初の方法を使用し、$を使用して他のライブラリを使用すると、競合が発生します。

3
palerdot

古いjQueryバージョンで作業する必要があるまれな状況（私が正しく思い出せば、1.8.Xより前）では、2つのdocument.readyブロックを指定すると、最初のブロックだけがIE9で起動されます。

これは私が1回または2回経験したまれなバグで、再現できませんでしたが、注目に値すると思いました。

1
Maciej Gurban

Jqueryドキュメントに基づいています：

All three of the following syntaxes are equivalent:

$(document).ready(handler)
$().ready(handler) (this is not recommended)
$(handler)

http://api.jquery.com/ready/

0
rderoldan1

Jqueryを使用してdocument readyイベントを使用できます。イベントはドキュメントが完全に読み込まれたときに発生します。

 $(function () {
    setTimeout(function () {
        // your code
    }, 0);
})
0
Nimesh khatri

self ivokingまたはimmediately invoked 関数。つまり、関数は、ブラケットの最後のセットのパラメーターを使用して作成されるとすぐに実行されます。

Javascript Self Invoking Functions および Immediately-Invoked Function Expression（IIFE） を読むと、これらの関数の使用場所と使用方法が明確になります

0
Rohan Kumar