jQueryのおまじないを理解する
ready()メソッド
jQuery は、ready() メソッドを実装しています。ready()メソッドは、DOMのドキュメントオブジェクトにバインドされる、カスタムイベントハンドラで、関数を唯一の引数としてとります。
この関数にはDOMがトラバースや操作を実行できるようになったときに実行されるJavaScriptのコードが含まれます。
window.onload イベントに換えて利用できるもので、必要に応じて何度でも利用できます。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>jQuery</title>
- </head>
- <body>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script type="text/JavaScript">
- jQuery(document).ready(function(){
- alert('ready!');
- });
- </script>
- </body>
- </html>
上記で、</body> の直前に書いているのは、この位置より前の要素がすべて読み込まれてから実行スクリプトが実行される様にするためです。
ready() の引数として渡している function(){ …} が、コールバック関数で、要素がロードされたタイミングで実行されます。
ショートカット
上記、jQuery(document).ready(…)メソッドを、以下ショートカットに書き換えることができます。
ready がどっかいってしまいました。いかにreadyが重要かということが逆にわかります。
- jQuery(function(){
- alert('ready');
- });
$
$ グローバルオブジェクト は、jQuery に置き換えられます。つまり、$() は、jQuery() 関数のエイリアスとなります。
- $(function(){
- alert('ready!');
- });
で、さらに上記の様に書き換わります。このような手順を経てこうなってたんですねー
$ の競合回避
ただ、jQueryという名称は、まぁｊQueryしか使わないはずので、良いのですが、$ を jQuery に置き換えてつかうとなると、他のライブラリと競合する可能性があります。そこで、
- 匿名関数(関数リテラル) を作成
- その関数の引数としてjQuery オブジェクトを渡す
- jQuery を パラメータ $ として受け取り、それをｊQueryとして利用する
ことで$の競合を回避します。
- (function($){ // $ を引数として受け取る匿名関数
- alert($('#txt').text()); // $ を jQuery として利用できる
- })(jQuery) // 匿名関数に、パラメータとして jQuery を渡す
なぜ、上記手順で競合が回避できるのか？
JavaScript には、以下のような関数の種類があります
- 宣言的な関数
- 無名関数
- 関数リテラル(関数式)
それぞれ、
宣言的な関数
文と関数を宣言し、function から始まる、通常の関数。解析は1回のみで、静的に名前がつけられます。
- function hello(name) {
- alert('Hello!' + name);
- }
- hello('Hiroto');
なじみ深いやつです。
無名関数
コンストラクタを使ってつくられた関数で、アクセスされるたびに解析され、名前は与えられません。
こんなやつですね。
- var hello = new Function("name", "alert('Hello!' + name)");
- hello("Hiroto");
匿名関数(関数リテラル)
式の一部として文の中でつくられる関数で、解析されるのは一度のみ、静的で名前をつけられる場合もあります。
名前をつけられた場合、その関数の中でのみ利用できます(function の後に関数名を書きますが、その関数の中のみでしか利用できません。再帰に利用するとよさそうです)。
- var hello = function(name) {
- alert('Hello!' + name);
- };
- hello('Hiroto');
上記例では、変数に代入していますが、式の中でも使えます
- function test(p , f) {
- alert(f(p));
- }
- test('Hiroto', function(name){ alert('Hello!' + name); });
で、パラメータを、(function(p){…})(パラメータ) みたいに渡すこともできます。jQueryのパターンですね。
- function test(f) {
- alert(f());
- }
- test((function(name){ alert('Hello!' + name); })('Hiroto'));
ということで、匿名関数(関数リテラル)の中に、パラメータとして閉じ込められると、その中でのみ有効な名前を与えることができるので、擬似的に名前空間を構築することができたりします。
jQuery では多用されているので、この辺りの理屈は押さえておいた方がよさそうですね。
なんてことを、久しぶりにjQueryをさわりだそうとしたので復習がてら。以下の書籍などを見直してメモしてみました。
