読者です 読者をやめる 読者になる 読者になる

jQuery.extendとjQuery.fn.extendの違い

[2011/03/12追記]
昔の記事だから今は見られていないかなと思ったんですが、それなりにアクセスあるようなので追記。
$('div').myMethod()みたいな感じでmyMethodという自分用の好きなメソッドを生やすのは良いのですが、
複数人でそういうことをやったりするとみんな「myMethod」というメソッド作って衝突してしまうこともあると思います。



jQuery1.5が使えるのであればjQuery.subを使ってmyMethodを閉じ込めてしまい、
衝突を避けるというのが良いかもしれません。
http://api.jquery.com/jQuery.sub/



また、たとえばtooltipに関するメソッドを生やしたい場合に、
pluginの作り方にも書いてある通り、

(function( $ ){

  $.fn.tooltip = function( options ) { // THIS };
  $.fn.tooltipShow = function( ) { // IS   };
  $.fn.tooltipHide = function( ) { // BAD  };
  $.fn.tooltipUpdate = function( content ) { // !!!  };

})( jQuery );

と、複数のメソッドを生やすのはBADで、tooltip()というメソッドを一つ作り、引数でそれぞれの動きを処理してあげるのが良いそうです。



この辺の話はjQuery.subの記事内リンクにもあるNemikor Blog » Building stateful jQuery pluginsを見ると良いと思います。
jQueryUIとか見ると結構わかりやすいかも。



以上追記終わりです。参考にしてください。



適当な理解だったから全然違いとかわかんなかったけど、jQuery.extend(object) - jQuery 日本語リファレンス見たら、

jQuery.fn.extendがjQueryオブジェクトのプロトタイプを拡張するのに対して、このメソッドはjQuery名前空間に新たなメソッドを追加する。

って書いてあった。
なるほど。
jQuery.fn.extendの方はjQueryのprototypeに対して追加するのね。

第1回 jQueryライブラリ(1~171行目):jquery.jsを読み解く|gihyo.jp … 技術評論社見たら、確かに書いてあった。

initメソッド定義

0036: jQuery.fn = jQuery.prototype = {
0037: init: function( selector, context ) {
0038: // Make sure that a selection was provided
0039: selector = selector || document;
0040:

36行目からが jQueryオブジェクトの初期化処理になります。jQuery.fnとjQuery.prototypeに対してメソッドを定義していきます。

なるほど。

と言うことは、関数みたいに共通なものはjQuery.fn.extendでクラス変数みたいに呼び出したいものはjQuery.extendで定義すればよいのかな。

<div id="info"></div>

<script type="text/javascript">
jQuery.extend({
  person : {
    name: 'taro',
  }
});

jQuery.fn.extend({
  hello : function (id, name) {
      id = id || '#info';
      name = name || jQuery.person.name;

      return $(id)
        .html('hello! ' + name);
    }

});

$('#info').hello();
</script>

こんな感じかな?
うーん、でも書きながら思ったけど、
関数もクラス変数もprototypeにするのが普通だから違いがないな。
違いはなんだ?
fnの方は関数だけか?
jQuery.extendはjQueryそのものに追加で、jQueryオブジェクトには追加されないから
メソッドチェーンができないということなのかな。