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

けろ&ひな

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

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

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

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

[jQuery]pluginの作り方について 其の32011-08-29(Mon)

(其の1其の2の続きです。)
6.Namespaceについては、3つに分かれています。
それから、7.Summary and Best Practicesです。
長くなりますが、一気に。


6.Namespacing
プラグインの開発で、適切な名前空間を割り当てることはとても重要な部分です。
名前空間を正しく割り当てることで、同じページ内にある他のプラグインやコードによって、あなたのプラグインが上書きされる可能性がとても低くなることを保証します。
名前空間であなたのプラグイン開発者としての人生はハッピーになれます。
名前空間は、メソッド、イベントやデータの動きをよりよく押さえるのに役立ちます。

6.1.Plugin Methods
いかなる状況下においても、1つのプラグインでjQuery.fnオブジェクトの中に2つ以上の名前空間を作っちゃダメよ。
(function($) {
$.fn.tooltip = function(options){ // THIS };
$.fn.tooltipShow = function() { // IS };
$.fn.tooltipHide = function() { // BAD };
$.fn.tooltipUpdate = function( content ) { // !!! };
})(jQuery);

これは、$.fn の名前空間を汚しまくっているという、がっかり&とほほ&ザンネンな例です。
これを解決するには、プラグインのメソッド全てを一つのオブジェクト定数とし、
文字列のメソッド名を引数としてプラグインのメソッドを呼び出すようにすべきです。
(function($) {
var methods = {
init : function( options ) { // THIS },
show : function() { // IS },
hide : function() { // GOOD },
update : function( content ) { // !!! }
};

$.fn.tooltip = function( method ) {

// Method calling logic
if ( methods[method] ) {
// メソッドが存在するなら、メソッドの呼出を行う。
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1));
} else if (typeof method === 'object' || !method ) {
// メソッドの指定がなければ、init()を呼び出す。
return methods.init.apply( this, arguments );
} else {
// 存在しないメソッドが呼び出された場合などはエラーとする。
$.error( 'Method '+method+' dose not exist on jQuery.tooltip' );
}

};
})(jQuery);
$('div').tooltip();	// calls the init method
$('div').tooltip({
foo:'bar'
}); // calls the init method
$('div').tooltip('hide'); // calls the hide method
$('div').tooltip('update', 'This is the new tooltip content!'); // calls the update method

プラグインアーキテクチャのこのタイプは、プラグインの親のクロージャの中であなたのメソッド全てをカプセル化し、最初のメソッド名でメソッドを呼出し、メソッドに必要な追加パラメータを渡すことができます。
メソッドのカプセル化とアーキテクチャのこのタイプは、jQueryプラグインコミュニティーの標準であり、jQueryUIのプラグインやウィジェットを含む無数のプラグインで使用されています。

6.2 Events

もしあなたのプラグインがイベントをバインドするなら、名前空間を使用したバインドをお勧めします。
この方法では、もしあとからアンバインドする必要がでてきた時に、他のイベントの同じ型にバインドされていても
干渉することなくアンバインドできます。
それは、バインドするイベントの後ろに".<namespace>"と追加するだけです。
(function($) {

var methods = {
init : function( optiois ) {
// 'resize.tooltip' で 名前空間を指定して reposition メソッドを実行するようバインド設定
return this.each( function() {
$(window).bind('resize.tooltip', methods.reposition );
});
},
destroy : function() {
// '.tooltip' の名前空間指定でイベントをアンバインド
return this.each( function() {
$(window).unbind('.tooltip');
});
},
reposition : function() { // ... },
show : function() { // ... },
hide : function() { // ... },
update : function( content ) { // ... }
};

$.fn.tooltip = function( method ) {

if ( methods[ method ] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if (typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}

};
})(jQuery);
$('#fun').tooltip();
//Some time later...
$('#fun').tooltip('destroy');

この例では、tooltipのinitメソッドでイニシャライズ時にwindowのresizeイベントの下に"tooltip"という名前空間
でrepositionメソッドをバインドしています。
その後、tooltipを破棄する際、"tooltip"という名前空間をunbindメソッドに渡すことによってプラグインのバインドイベントをアンバインドすることもできます。
これで、偶然プラグインの外で制限されるかもしれない出来事を解かずに、私たちは安全にプラグインイベントを解くことができます。(エキサキト直訳)

6.3 Data

プラグイン開発時、プラグイン内のデータが初期化されているか状態をチェックする必要があることがあります。
そういう時は、要素ごとの変数を追えるjQueryの data メソッドを使用するとよいでしょう。
しかしながら、異なった名前で多くの別々のデータ呼び出しの動向をおさえるよりむしろ、あなたの変数のすべてを収容するのにただ一つのオブジェクトリテラルを使用して、ただ一つのデータ名前空間からそのオブジェクトにアクセスするのは、最も十分です。(エキサイト直訳)
(function($) {
var methods = {
init : function( options ) {
return this.each( function() {
var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text : $this.attr('title')
});

// if the plugin hasn't been initialized yet
if ( !data ) {

/*
* Do more setup stuff here
*/

// 'tooltip' データとして target=$this, tooltip=tooltip(のDOM)を設定する
$(this).data('tooltip', {
target : $this,
tooltip : tooltip
});

}
});
},
destroy : function() {
return this.each( function() {
var $this = $(this),
data = $this.data('tooltip');

//Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');

});
},
reposition : function() { //... },
show : function() { //... },
hide : function() { //... },
update : function( content ) { //... }
};

$.fn.tooltip = function( method ) {

if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || !method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method '+method+' does not exist on jQuery.tooltip' );
}
};

})(jQuery);

data を使用するとプラグインからのメソッド呼出に渡って変数と状態を追跡するのに役立ちます。(google直訳)
名前空間を使用することで、データを一箇所でまとめて扱えるようになり、削除が必要になった場合でも簡単に行うことができます。

7.Summary and Best Practices
jQueryのプラグインを作成するにはライブラリを最大限に活用し、あなたの賢く役立つコードを再利用可能なコードとして外に要約することで開発時間を効率的に短縮することができます。
jQueryプラグインを作る際に気をつけるべき点を纏めると以下の通りです。
  • プラグインは次の様にラップします。 (function( $ ){ // plugin goes here })( jQuery );

  • プラグインの直接のスコープ内で"this"キーワードを重複してラップしないようにしましょう。

  • プラグインから本質的な値を返す場合を除いては、メソッドチェーンが行えるように"this"キーワードを返すようにしましょう。

  • 長々と引数を書く必要がないようにプラグインの初期値の上書きを行うような書き方をしましょう。

  • jQuery.fnオブジェクトを取り散らさないよう、プラグインは1つにつき1つの名前空間のみを使用するようにしましょう。

  • メソッドやイベント、データは名前空間を使用しましょう。

  • " jQuery.fn " は " jQuery effin' " と発音しましょう。


以上。


実際に訳してみて思ったのは、ホントに分かってなかったなぁと。。。
メソッドチェーンを意識することは分かっていたんですけど、こうやればいいのかぁみたいな。
プラグイン内のデータとかも data(<namespace>, object) を使うことで使いやすく、しかもパージもできるとは。。。
namespace を使用することで、そういう効果もあったとはと思うことも。
初めから、ちゃんと本家サイトを見とくべきでした。
ググルといろんな情報が手に入るから、思わず近道したくなるんですよねぇ。。。今後、気をつけます。(反省)
関連記事

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

コメントの投稿

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

コメント

工事中
RSSフィード
リンク

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