SQLの窓

2013年02月24日


jQuery の fn.extend メソッドと extend メソッド の違いは $(セレクタ) のメソッドとして実行できるかどうか ( extend の仕様について )

厳密には、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)の最新記事】
posted by lightbox at 2013-02-24 10:00 | プラグイン作成(jQuery) | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり