実家に帰ったら犬に威嚇されました。agoです。
jQuery Pluginに関しては、以前jQuery Pluginの書き方として基本的な部分をまとめたのですが、もう少し細かい部分に関して再度まとめてみようと思います。
1 $.dataの活用
以前jQuery.dataの使い方でも紹介したのですが、Pluginからelementを処理する場合対象のelementが広範囲に及ぶことが多く、Plugin内の変数の他に各element毎の変数を持ちたくなることがあります。
たとえば、「クリックする毎に順番にCSSが変わるPlugin」を考えた場合、各element毎に「今どのCSSが指定されているか」を保持できると実装が楽になると思います。
具体的には以下のような形になります。
$(function () {
var colors = ['blue', 'yellow', 'red'];
$('div').click(function () {
var number = $.data(this, 'number') || 0;
$(this).css('color', colors[number++] || colors[number = 0]);
$.data(this, 'number', number);
});
});
また、最初にobjectで初期化しておくと、以後object形式で使用できるため便利かもしれません。
（jQuery.ime_external Pluginでは以下のような実装になっています）
;(function($) {
var name_space = 'ime_external';
$.fn[name_space] = function(options) {
var elements = this;
var add_data = function (v) {
$.data(v, name_space, {});
return $(v);
};
var focus = function () {
var self = this;
var obj = $.data(self, name_space);
obj.hoge = 'nnn';
};
var blur = function () {
var self = this;
var obj = $.data(self, name_space);
console.log(obj.hoge);
};
elements.each(function() {
add_data( this )
.bind('focus.'+name_space, focus)
.bind('blur.'+name_space, blur)
;
});
return this;
};
})(jQuery);
2 ショートカットmethodの用意
引数の指定は基本的にはobjectを使用しますが、引数の数が多い場合や初期値が決まっている場合が多い場合、$.ajaxに対する$.getのようにショートカットmethodを用意すると便利かもしれません。
jQuery.opensocial_simple Pluginでは以下のような実装になっています。
klass.get = function ( url, data, callback, type ) {
if ( $.isFunction ( data ) ) {
callback = data;
data = null;
}
return klass.ajax({
METHOD: 'GET',
url: url,
data: data,
success: callback,
CONTENT_TYPE: type
});
};
klass.post = function ( url, data, callback, type ) {
if ( $.isFunction ( data ) ) {
callback = data;
data = {};
}
return klass.ajax({
METHOD: "POST",
url: url,
data: data,
success: callback,
CONTENT_TYPE: type
});
};
klass.ajax = function ( s ) {
// hogehoge...
};
3 イベントネームスペースの活用
Plugin内でeventを設定する場合、イベントネームスペースを指定して設定するとPluginのイベントをすべて取り除きたい場合に便利です。
（sisso.jsではイベント設定時に'.Sisso'を指定しているため、$(‘*’).unbind(‘.Sisso’);でsisso.jsが設定したイベントのみを解除できます）
具体的には以下のような形で設定します。
（ネームスペースを指定する場合、「.click」等のショートカット形式では指定できません）
$('div').bind('click.name_space', function () {
console.log('click');
});
$('div').unbind('.name_space');
jQueryでは.prototype拡張に関する機能がほとんどない代わりにPlugin作成の機能が充実しているため、ある程度まとまった機能はPluginとして作成しておくと後々使い回しが効くと思います。
カヤックではjQuery Pluginの作成経験のある技術者を募集しています！
