厳密には、prototype の意味が重要になるんですが、それを知っていてもあまり実用とは関係無いので事実だけを考えます。jQuery.extend = jQuery.fn.extend = function() {実際にはこのようなコードなので、処理そのものは同じですが、存在する場所が違うので jQuery からの処理を同じようにする事はできません。 fn.extend は、$(セレクタ) のメソッドとなる いわゆる、$(セレクタ) で作成されるオブシェクトは『インスタンス』で、常に prototype を継承して実体が作成されると考えるとしっくり来ます。しかし、extend メソッドでは $.メソッドとして実行できるようになります。よって、同様の処理を行う為には以下のコードのように全く違った実装をする必要があります。
<div id="box1"></div> <div id="box2"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $.extend({ test1:function(a){ this(a).text("test1"); return this(a);} }) $.fn.extend({ test2:function(){ this.text("test2"); return this;} }) var x = $("#box1"); x.test2().css("background-color","#c0c0ff"); $.test1("#box2").css("background-color","#c0c0c0"); console.dir(x) </script>
extend メソッドの仕様 使い方としては、3種類あります。一つは extend(object1,object2) という形で、object1 に object2 をマージするのですが、同じ名前を持つものは置き換えられてしまいます。また、object1 を省略した形は元のオブジェクトに object2 をマージするようです。( これを fn.extend で行うのが一般的なプラグイン作成 ) 二つ目の使い方は、extend(true,object1,object2) という使い方で、単純な置き換えをせずにデータが処理されます。具体的には、jQuery のドキュメントを読むか、実際に試すといいと思います。 三つ目は、object = $.extend({}, object1, object2) というような形で、object1 を置き換えずに object に object1 に対して object2 をマージしたオブジェクトを作成する事ができます。
タグ:jquery javascript
|
【プラグイン作成(jQuery)の最新記事】
- jQuery の回転アニメーション / $({kakudo: 0}).animate(properties, options )
- HTML 上のデータをローカルに保存する jQuery プラグイン
- jQuery のプラグインで動的なコントロールの処理を作成 : add_button / set_event / set_link
- TD 内のテキストを入力可能にする tableinput.js / jQuery プラグイン
- スマホとPC で別の処理を記述できる jQuery のストリートビュープラグイン
- jQuery のプラグインとしてストリートビューを利用する
- jQuery の簡単なプラグインを $.fn.extend で作成( 0〜9のみ入力可能なフィールド )
- INPUT type="number" の振る舞いをブラウザ間で調整する jQuery プラグイン
- jQuery のプラグイン作成 : 要素のクリックイベントで、画像の実際の縦横サイズちょうどの大きさのウインドウを開いて表示する
- jQuery の回転アニメーションでくるくる回る『実行中アイコン』
- jQuery を使ったCSS 一括エフェクトアニメーション( rotate, skew, borderRadius, boxShadow )
- jQuery : IFRAME 作成プラグインと、アニメーションによる表示切替
- jQuery でかなり実用的かもしれない入力制限( 入力値復帰型 )
- jQuery で、指定文字集合のみ入力可能なプラグイン