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オブジェクトには追加されないから
メソッドチェーンができないということなのかな。