jQuery(function($){ ... });と(function($){ ... })(jQuery);の違いを教えて下さい。
ここが参考になります。
今読んでます、眠い頭にはなかなか難しいのでもう少しじっくり読みます。
なんとなく無名関数でぐぐってみよう
無名関数でぐぐった結果ここへ逃げてきました。一番近づいたところでreadyメソッドとloadメソッドの違いでしたttp://www.jquerystudy.info/reference/core/jQuery3.htmlttp://www.jquerystudy.info/reference/events/load.htmlしかし自分で色々やってても画像の読み込みを待つかどうかだけじゃない気がするのです。
「JavaScriptでは関数をオブジェクトとして扱うことができる」これを踏まえて、以下、適当に説明。
まず、jQuery.noConflictを使わない限り、$=jQueryなので、以下2通りの書き方は同じ意味ということになる。
$(function(){ ... });jQuery(function(){ ... });
jQuery() という関数を呼び出しているわけだ。これに関数オブジェクトを渡すと、jQuery(document).ready() に関数オブジェクトを渡したときと同じ処理が実行される。つまり、以下の4つは全て同じ意味。
$(function(){ ... });jQuery(function(){ ... });$(document).ready(function(){ ... });jQuery(document).ready(function(){ ... });
jQuery(document).ready() に渡された関数オブジェクトは、DOMの準備が完了した時に実行される。そして、この jQuery(document).ready() に渡した関数オブジェクトは、実行時に「jQuery」そのものを受け取ることができる。ttp://api.jquery.com/ready/
この機能を使うことで、$はもちろん、任意の名前を使ってjQuery関数を実行できるようになる。以下の4行はいずれもDOMの準備完了が完了したときに実行される。
$(function(xxx){ xxx(’body’).text(’foobar’); });jQuery(document).ready(function(j){ j(’body’).text(’foobar’); });jQuery(function($){ $(’body’).text(’foobar’); });jQuery(function(aaa){ aaa(’body’).text(’foobar’); });
さて、もう一つの「(function($){ ... })(jQuery);」について考えてみよう。これは「無名関数」を即実行してる。「即時関数」と呼ぶ人もいる。わかりやすくするため、無名関数に名前をつけるとこんな書き方になる。
function hoge($){ ... }hoge(jQuery);
見れば分かる通り「即実行」であって、こっちはDOMの準備完了を待たない。だから、ここに直接 $(’CSSセレクタ文字列’) を書いてもうまく動かない。
(function($){ $(’body’).text(’foobar’); })(jQuery);
セレクタを使ってDOM操作をしたければ、更に $(function(){ ... }); とかで括る必要がある。
(function($){ $(function(){ $(’body’).text(’foobar’); }); })(jQuery);
こんな感じかな？
おおおお凄い分かりやすいです。おかげで謎が解けました、ありがとうございました！
みんなの回答 3 件
ここが参考になります。
クロージャ
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Closuresなんとなく無名関数でぐぐってみよう
「JavaScriptでは関数をオブジェクトとして扱うことができる」
これを踏まえて、以下、適当に説明。
まず、jQuery.noConflictを使わない限り、$=jQueryなので、以下2通りの書き方は同じ意味ということになる。
$(function(){ ... });
jQuery(function(){ ... });
jQuery() という関数を呼び出しているわけだ。
これに関数オブジェクトを渡すと、
jQuery(document).ready() に関数オブジェクトを渡したときと同じ処理が実行される。
つまり、以下の4つは全て同じ意味。
$(function(){ ... });
jQuery(function(){ ... });
$(document).ready(function(){ ... });
jQuery(document).ready(function(){ ... });
jQuery(document).ready() に渡された関数オブジェクトは、DOMの準備が完了した時に実行される。
そして、この jQuery(document).ready() に渡した関数オブジェクトは、実行時に「jQuery」そのものを受け取ることができる。
ttp://api.jquery.com/ready/
この機能を使うことで、$はもちろん、任意の名前を使ってjQuery関数を実行できるようになる。
以下の4行はいずれもDOMの準備完了が完了したときに実行される。
$(function(xxx){ xxx(’body’).text(’foobar’); });
jQuery(document).ready(function(j){ j(’body’).text(’foobar’); });
jQuery(function($){ $(’body’).text(’foobar’); });
jQuery(function(aaa){ aaa(’body’).text(’foobar’); });
さて、もう一つの「(function($){ ... })(jQuery);」について考えてみよう。
これは「無名関数」を即実行してる。「即時関数」と呼ぶ人もいる。
わかりやすくするため、無名関数に名前をつけるとこんな書き方になる。
function hoge($){ ... }
hoge(jQuery);
見れば分かる通り「即実行」であって、こっちはDOMの準備完了を待たない。
だから、ここに直接 $(’CSSセレクタ文字列’) を書いてもうまく動かない。
(function($){ $(’body’).text(’foobar’); })(jQuery);
セレクタを使ってDOM操作をしたければ、更に $(function(){ ... }); とかで括る必要がある。
(function($){ $(function(){ $(’body’).text(’foobar’); }); })(jQuery);
こんな感じかな？
関連するトピックス