Hatena::ブログ(Diary)

文殊堂 このページをアンテナに追加 RSSフィード Twitter

2008-08-26

$(document).ready();について

jQuery使用時に以下の書き方をすると、どれを使ってもDOM構築後のタイミングで実行したい処理を実行できる。

$(document).ready(function(){
/*実行したい処理*/
});

$().ready(function(){
/*実行したい処理*/
});

$(function(){
/*実行したい処理*/
});

以下のように複数回実行した場合は$(function(){/**/});を実行した順に、

中の関数が実行されるので以下の場合は、DOM構築後にconsoleに改行を挟んで1,2,3と順番に出る。

$(function(){
console.info(1);
});
$(function(){
console.info(2);
});
$(function(){
console.info(3);
});

自信がないので、一応、コードの該当箇所を確認

  • jQuery.fn.ready 2282-2297
    • jQuery.isReady==trueの場合、渡された関数をdocumentをthis、jQueryを第一引数として即実行。
    • jQuery.isReady==falseの場合、jQuery.readyで順次実行される場合に、documentをthis、jQueryを第一引数として実行されるように無名関数で包んだ上でjQuery.readyListにpush。
  • jQuery.ready 2304-2324
    • jQuery.isReady==falseの場合のみメインの処理を実行。jQuery.isReadyにtrueを代入。
    • jQuery.readyListという配列に入っている関数を順繰りに、documentをthisとして呼び出す。
  • bindReady 2329-2387
    • DOM構築後のタイミングでjQuery.ready関数を実行するようにイベントを登録するなどする(一度だけ)。

「$(function(){/**/});を実行した順に、中の関数が実行される」というのは確認できた。

「documentをthis、jQueryを第一引数として実行される」ことは初めて知ったがどうも使いどころが思い浮かばない。

追記2008/09/16

bindReadyについては第10回 jQueryライブラリ(2183行目?2364行目):jquery.jsを読み解く|gihyo.jp … 技術評論社が詳しい。

os0xos0x 2008/08/26 12:12 jQuery(function($){
//hoge
});
ってすると、hogeでprototype.jsとかとのコンフリクトを気にせずに$が使えますよ。$はコンフリクトしやすいので、jQueryしか使ってない場合でもこの書き方にしておくと安全です。
あと、Pluginの場合はこんな感じが良いみたいです。 http://tech.kayac.com/archive/jquery-plugin-base.html

monjudohmonjudoh 2008/08/26 16:04 (function($) {
/* pluginのコード */
})(jQuery);
pluginで↑みたいのは良くやりますが、


確かにアプリケーションのコードで
(function($){
$(function(){
/*実行したい処理*/
});
})(jQuery);
みたいにやるより、
jQuery(function($){
/*実行したい処理*/
});
みたいにやる方がスマートですね。
どうもです。

suzukisuzuki 2009/03/10 14:56 jQuery勉強中のsuzukiと申します。
大変参考になりました。ありがとうございます!

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証