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

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

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)的なイメージ。

Javascript

  1. var o = function(){};
  2.  
  3. /**
  4.  * $.extend()は一般的に「クラス変数」と呼ばれる形式で
  5.  * $に追加される。
  6.  */
  7. o.extend = function(){alert("o.extend")};
  8.  
  9. /**
  10.  * $.fn.extend()で追加されたメソッドは
  11.  * $(selector)で返されるオブジェクトのプロトタイプに
  12.  * 追加される
  13.  */
  14. o.fn = {hoge: function(){alert("o.fn")}};
  15. o.get = function(){
  16.     return {}.prototype = o.fn;
  17. }
  18.  
  19. onload = function() {
  20.     o.get().hoge(); //o.fnが表示される
  21. }
  22.  
投稿日 2009年6月22日 18:59
カテゴリ JavaScript
タグ jQuery | プラグイン | 基礎
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1159

コメント

コメントする
Name
Email Address
URL