jQueryでの書き方について

質問

HTMLファイルから読み込まれるJavaScriptファイルに次のような書き方がありました。

(function($){
$(function(){
// DOM操作などの処理を記述
... ...
});
})(jQuery);

このような書き方を初めて見たのですが、これはどのような意図があるのでしょうか？
HTMLの読み込みが完了してから処理を始めるように、次のような書き方はよく見るのですが、これとは何が違い、どう使い分けるのでしょうか？

$(function(){
// DOM操作などの処理を記述
... ...
});

■環境
jQuery 2.1.3

回答No.2

Gotthold · ベストアンサー

(function($){
・・・
})(jQuery)

No.1の回答の通り、無名関数を即時実行しているので、
その場で処理が実行される点はfunctionで包んでも包まなくても同じです。

違いとしては、この書き方なら、グローバル空間の$が未定義（もしくはjQuery以外が代入されている）でも、jQueryさえ定義されていれば、
function内では$でjQueryを参照できます。

また、このfunction内でローカル変数を定義すれば、
グローバル変数を作らずにすみます。

お礼

Gottholdさん
回答ありがとうございます。

> 違いとしては、この書き方なら、グローバル空間の$が未定義（もしくはjQuery以外が代入されている）でも、jQueryさえ定義されていれば、
> function内では$でjQueryを参照できます。
次のような書き方も最近知ったのですが、これも同じ効果があるということですよね？
jQuery(function($) {
... ...
});

同じ人が、HTMLファイルにスクリプトを書く場合は2番目の書き方、外部のJavaScriptファイルに書く場合は最初の書き方をしていたので、それが関連するかと推測していたのですが、特にそういうことではないのですね。

どうもありがとうございました。

回答No.1

t_ohta

$(function(){ }); は、いつ、誰が実行してくれるでしょう。
JavaScriptのルールからすると、この定義は関数の定義だけして実行はしていません。
jQueryが賢く、jQuery利用を前提として定義されたモノを探し出して実行してくれているのです。

JavaScriptのルールとして、関数を定義して、読込と同時に実行するためには
==========
var hoge = (function() { });
hoge();
==========
と記述する必要があります。
これの省略形が
==========
(function() { })();
==========
になります。（無名関数の即時実行）

なので、先に書かれた記述方法はJavaScriptのルールに従ってjQuery用の関数を定義し、即時実行を行っているので、厳密にルールに従った記述方式です。

お礼

t_ohtaさん
回答ありがとうございます。

分解して解説して頂いたお陰で、おまじないにしか見えなかったものが多少理解できるようになりました。

>jQueryが賢く、jQuery利用を前提として定義されたモノを探し出して実行してくれているのです。
この仕組みについては、自分のJavaScript力を上げてからjQueryのソースを読んで理解したいと思います。

ありがとうございました。