$(document).ready shorthand


245

次の省略形$(document).readyですか?

(function($){

//some code

})(jQuery);

このパターンが頻繁に使用されているのを確認しましたが、それに対する参照を見つけることができません。の省略形である場合$(document).ready()、機能しない特別な理由はありますか?私のテストでは、readyイベントの前に常に起動するようです。


上記のパターン関数(などvar somevar;)内で定義された変数は、関数外の同じ名前の変数の内容を変更しません
Timo Huovinen

3
このコードは、$がその関数ブロック内のjQueryを表すことを保証する効果があるため、jQueryの$エイリアスが無効になっている、または別のものとして定義されている場所にコードを移植できます。
AsksAnyway 2014年

回答:


252

の省略形$(document).ready(handler)$(handler)handler関数はです)です。こちらをご覧ください

あなたの質問のコードはとは何の関係もありません.ready()。むしろ、jQueryオブジェクトを引数として持つ、即時に呼び出される関数式(IIFE)です。その目的は、少なくとも$変数のスコープをそれ自体のブロックに制限して、競合を引き起こさないようにすることです。通常、jQueryプラグインが使用するパターンを確認して、それを確認し$ == jQueryます。


14
技術的には、これは即座に呼び出される関数式です。それが自己呼び出しであれば、それはそれ自体の内部からそれ自体を呼び出すことになります。Webでを検索するiifeか、カウボーイアルマンの有名なブログ投稿にスキップしてください。詳細…
2540625 2014年

546

略記は次のとおりです。

$(function() {
    // Code here
});

24
最初の引数は$です。それを追加したいと思うかもしれません。それは役に立ちますjQuery(function($, undefined) {});
レイノス

5
@raynos必須ではありません。上記のコードは、別名$(document).ready(function(){ });
カイルトラウバーマン

10
$最初の引数として無料で入手できることを知っておくと便利です。
レイノス

3
私は今でも月に1回くらいはこの回答にアクセスしています。
Nugsson 2018年

89

正しい速記は次のとおりです。

$(function() {
    // this behaves as if within document.ready
});

あなたが投稿したコード…

(function($){

//some code

})(jQuery);

…無名関数を作成し、それをjQueryargとして渡してすぐに実行し$ます。$は既にのエイリアスであるため、効果的に行うことは、関数内のコードを取得して通常のように実行することだけですjQuery。:D


4
$をエイリアスとして使用する他のツールがロードされている場合、$がjQueryのエイリアスであることも保証していると言えます
Jim Wolff

16

これはの省略形ではありません$(document).ready()

あなたが投稿したコードは、内部コード$を囲み、グローバル名前空間を汚染することなくjQueryを利用できるようにします。これは、1つのページでプロトタイプとjQueryの両方を使用する場合に使用できます。

ここに文書化されています:http : //learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immediately-invoked-function-expression


質問にお答えいただきありがとうございます
MarcGuay

12

これらの特定の行は、jQueryプラグインの通常のラッパーです。

「...プラグインがドル記号を使用する可能性のある他のライブラリと衝突しないようにするには、jQueryをドル記号にマップする自己実行関数(クロージャ)に渡すことをお勧めします。その実行範囲内の別のライブラリによって上書きされない。」

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

http://docs.jquery.com/Plugins/Authoringから


11

準備が整ったマルチフレームワークセーフショートハンドは次のとおりです。

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

これは、jQueryが$and undefined変数を使用する唯一のフレームワークではないためです


また、次のように書くこともできます(function($){ ... })(jQuery);
マイクコーサー

2
@MikeCauserも良いアプローチですが、呼び出されませんready。代わりにすぐに呼び出されます
Timo Huovinen

5

さらに短いバリアントを使用することです

$(()=>{

});

ここで$、jQueryを表し、クロージャーから継承する()=>{}いわゆる「矢印関数」ですthis。(それでthisあなたはおそらくあなたのwindow代わりに持っているでしょうdocument。)


0

これはどうですか?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.