jQuery 実行パターンのおさらい

Pocket

システム部の鈴木です。

弊社では自主参加という形で不定期ですが勉強会をやってたりします。

最近、非プログラマの方向けにjQueryの基礎に関しての説明を行う勉強会を行った際につっこまれ
改めて確認したところ間違って理解していた事があったので自分への戒めのためのポストです。。

jQueryを使ってJavaScriptを実装する際のよくあるパターンはこの辺りですよね。

<br />
$(document).ready(function(){<br />
  // 処理を記述<br />
});<br />

これは明示されているようにdocument要素のDOMが構築されてから(ready)処理を実行するものですね。
見てのとおりです。

あとよくあるのは以下の2つでしょうか。

<br />
$(function(){<br />
  // 処理を記述<br />
});<br />

 

<br />
(function($){<br />
  // 処理を記述<br />
})(jQuery);<br />

これ、勘違いしていました。
どちらも即時実行だと勘違いしていました。なんかすいませんでした。。

幾つか調べたところ、正しくは前者は最初のパターンと同じくDOMの構築が済んでから、
後者は即時関数なので、こちらだけが即時実行のパターンのようでした。

悔しいので jQuery.prototype あたりの中を読み直して、近いうちに何かここでご報告が出来ればと思います。。

ちなみに前回の勉強会で用意した資料です。

form.html
jQuery基礎講座2

大した内容では無いのですが、jQUeryを初めて使う方には少しは参考になればうれしいです。
あ、サンプルのhtmlではTwitter BootStrapも利用しています。