読者です 読者をやめる 読者になる 読者になる

jQuery Plugin作成時の3つの注意点

実家に帰ったら犬に威嚇されました。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の作成経験のある技術者を募集しています!

関連記事

jQueryを使うときに気をつけるべき8のポイント

jQuery.autouploader Pluginを作成しました。

jQuery.brbr Pluginを作成しました。