WEBプログラム覚書::jQueryのプラグイン作成前のメモ

2009年06月22日 18:59

jQueryのプラグイン作成前のメモ

パーマリンク | http://www.kantenna.com/cgi-bin/mt/mt-tb.cgi/466

jQueryのプラグイン作成がなんとなくわかった気になってたけど全然わかってなかった。ってかjQuery自体わかってなかった。更に言うとjavascriptが今だにわかってないんじゃねって感じで凹むなー。

｢$｣と｢jQuery｣

とりあえず｢$｣は｢jQuery｣のエイリアスらしい。 $使ったりjQuery使ってたりでなんなんだろうって思ってたけどそういうことだったのか。

$.extend()と$.fn.extend()

jQuery.extend(object) - jQuery 1.3.2 日本語リファレンスに$.extend()はjQuery名前空間に新たなメソッドを追加。 $.fn.extend()はjQueryオブジェクトのプロトタイプにメソッド追加。

と書いてあるが一体どう使い分けるのかがよくわからない。

｢$｣と｢$(selector)が返すもの｣

｢$｣と｢$(selector)が返すもの｣は異なるものって認識がまったくなかったけど多分違うもの。

そう考えると上記で言ってることが理解できる。

$.fn.extend()で追加した場合、$(selector)で返ってくるjQueryオブジェクトにメソッドが追加されてる(prototypeオブジェクトのプロパティとして)ので$(selector).hoge()という形式で使える。

一方$.extend()は$そのものにメソッドを追加するのだけで$(selector)で返ってくるオブジェクトにメソッドの追加はされないので$(selector).hoge()という感じでは利用できない。

なのでプラグイン作成する場合は基本的に$.fn.extend()を使うことになるんだろうけど $.extend()を使っているプラグインも多々ある感じ。

$.extend()を使う理由

$.fn.extend()内で全部できそうな気がするんだけどわざわざ $.extend()を使う理由はなんなんだろう？？

メモリの節約的な意味かと一瞬思ったけど prototypeオブジェクトに追加されるわけだしなぁ・・・

そういう慣例ならそれですっきり納得なんですがなんか理由あるんだろうなぁ・・・。

もっといろんなプラグインをみれば何か掴めるかもしれないのでそれまでこれは保留。

$.extend()と$.fn.extend()のイメージ

oは$、o.getは$(selector)的なイメージ。


var o = function(){};

/**
 * $.extend()は一般的に｢クラス変数｣と呼ばれる形式で
 * $に追加される。
 */
o.extend = function(){alert("o.extend")};

/**
 * $.fn.extend()で追加されたメソッドは
 * $(selector)で返されるオブジェクトのプロトタイプに
 * 追加される
 */
o.fn = {hoge: function(){alert("o.fn")}};
o.get = function(){
	return {}.prototype = o.fn;
}

onload = function() {
	o.get().hoge(); //o.fnが表示される
}