FC2ブログ
googleで
カスタム検索
プロフィール

けろ&ひな

Author:けろ&ひな
大阪在住。
親ばか。
最近、転職したよ。でも、やってることは一緒なんだけどね。;-P

最近の記事
カテゴリー
月別アーカイブ
最近のコメント
最近のトラックバック
スポンサード リンク

スポンサーサイト--------(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[jQuery]pluginの作り方について 其の22011-08-26(Fri)

其の2では、4~5を。
では。
(其の1はこちら

4.Maintaining Chainability

先ほどの例では、ページ内の最大の高さをIntegerで返しました。
ですが多くの場合、プラグインではコレクションの要素に対して変更を加えメソッドチェーンによって次の処理を行います。
このメソッドチェーンこそがjQueryの売りなのです。

ということで、先ほどの例をメソッドチェーン可能なものにするためにjQueryオブジェクトである"this"を返すようにしましょう。

(function($) {
$.fn.lockDimensions = function( type ) {

return this.each(function() {
var $this = $(this);
if (!type || type == 'width') {
$this.width( $this.width() );
}
if (!type || type == 'height' ) {
$this.height( $this.height() );
}
});

};
})(jQuery);
$('div').lockDimeisions('width').css('color', 'red');

これで、プラグインが"this"キーワードを直接スコープ内で返すのでjQueryによるメソッドチェーンが行えるようになり、「.css()」が使えます。
もし、本質的な値を返さないプラグインなら、プラグイン関数は直接のスコープ内で"this"キーワードを返すようにするべし。

プラグインに渡される引数は、プラグイン関数の有効範囲に渡されます。
上の例でいうと、プラグイン関数の引数として渡した文字列'width'はプラグイン関数の「type」引数に渡されることになります。


5.Defaults and Options
多くのオプションを提供する、より複雑でカスタマイズ可能なプラグインでは、プラグインが呼び出された時に初期値を「$.extend」を使って継承できるように設定しておくのがよいのでないでしょうか。
(function($) {
$.fn.tooltip = function( options ) {
var settings = {
'location' : 'top',
'background-color' : 'blue'
};

return this.each(function() {
// if options exist, lets merge them
// with our default settings

if ( options ) {
$.extend( settings, options );
}

// Tooltip plugin code here

});

};
})(jQuery);
$('div').tooltip({
'location':'left'
});

この例では、tooltipプラグインに options 引数として 'location' を 'left' で上書きします。
一方、'background-color' は初期設定の 'blue' をそのまま引き継ぎます。
結果として、options は以下のようになります。
{
'location' : 'left',
'background-color' : 'blue'
}

この方法は、利用可能なオプション全てを引数で渡す必要が無くなるという大変すばらしーーーーいやり方です。



ここまで。
ここまでで気づいたことは、やはりメソッドチェーンを意識するべきなんだということです。
プラグインとして扱うのであれば、そこから別の人が触る可能性があるということを意識しろということですね。
そうじゃなければ、プラグインでなく、おとなしく外出しの関数にしなさいと。

あと、$.extendの使い方として、初期値の上書きに使うということ。
なんとなく、$.extendは、この目的に作られたのかなぁという感じがしました。
関連記事

テーマ : プログラミング
ジャンル : コンピュータ

コメントの投稿

管理者にだけ表示を許可する

コメント

工事中
RSSフィード
リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。