domの変化などをイベントとして定義できるjQueryプラグイン「jquery.customEventTrigger」っていうのを作りました。setIntervalで状態変化を監視して、変化したら任意のイベントをトリガーするというものです。もっと他にやり方があるかもと思いつつも。

jQueryプラグインでは、利便性のためにコールバック関数をフックできる仕組みにしたりしますが、フックポイントが不足していることがよくあります。かといって、単機能のためにわざわざフックポイントを増やしたくない。そんな時に、本プラグインで独自のキッカケでトリガーするカスタムイベントを定義すればbindやliveやoneで処理できるという訳です。例えば、opacityが1になると発生するイベントを作ってfadeInのコールバック代わりに使ったり、あるクラス名を取得すると発生するイベントを作ったり。

なお、jquery.customEventTriggerはカプセル化のためにsub方式を採用してるので、$.customEventTrigger(selector).method()という使い方になります。

下記のようにshowイベントを定義しておくと、cssのdisplayがnoneから別の値に変わった瞬間にトリガーします。addGettingTrueEventメソッドは条件がfalseからtrueに遷移するのを捉えるのです。

$.customEventTrigger('div.foo').addGettingTrueEvent('show', function(obj) {
    return (obj.css('display') != 'none');
});

下記のように使います。

$('div.foo').bind('show', function() {});

下記のようにresizeXイベントを定義しておくと、Widthが変化した瞬間にトリガーします。addChangeEventメソッドは値の変化を捉えます。

$.customEventTrigger("div.foo").addChangeEvent('resizeX', function(obj){
    return obj.get(0).clientWidth;
});

下記のように使います。

$('div.foo').bind('resizeX', function() {});

もう少し複雑な例。addメソッドは汎用のジェネレータで、上記の2つのメソッドのバックエンドでもあります。第2引数の関数の戻り値を前回の値と比較して変化を捉えますが、比較の仕方を第3引数で指定できます。trueだったらトリガーします。

$.customEventTrigger("div.foo").add('resize',
    function(obj){
        return [obj.get(0).clientWidth, obj.get(0).clientHeight];
    },
    function(a, b){
        if (a !== undefined) {
            return a[0] !== b[0] || a[1] !== b[1];
        }
    }
);

下記のように使います。

$('div.foo').bind('resize', function() {});

addGettingTrueEvent(String eventName, Function newValue[, Int interval])

addChangeEvent(String eventName, Function newValue[, Int interval])

   
add(String eventName, Function newValue, Function compare[, Int interval])

jQueryの次期バージョンの1.5ではjQuery自体のサブクラスを生成できるらしい。

なので、jQueryプラグインをうまいことカプセル化する方法として、プラグイン毎にjQueryサブクラスを用意するという選択肢が増えた。あんまり検証していないけど。

プラグインのソースもAPIもシンプルでいいと思うけど、パフォーマンス的にはどうなんだろう。

[2011.02.02追記] subclass()はjQuery1.5のリリースでsub()に変更になったようです

/**
 * jquery.myplug サブクラス方式
 *
 * SYNOPSIS
 *
 * $.myplug("target").method1();
 * $.myplug("target").method2();
 * $.myplug("target").method1().method2();
 */
;(function($) {

    /**
     * プラグインの名称
     */
    var plugname = 'myplug';
    $[plugname] = $.sub(); // [2011.02.02]subclass() -> sub()に変更
    $[plugname].fn.method1 = function(params) {return this}
    $[plugname].fn.method2 = function(params) {return this}
})(jQuery);

[追記2011.1.18][更新2011.1.18]

ベンチマークとってみた。jQueryプラグインをうまいことカプセル化する設計方法で構造的には一番合理的と思われたインナークラス方式と今回のサブクラス方式、公式ドキュメントに紹介されてる方式を比較。結果は初期化についてはサブクラス方式のほうが8〜10倍速かった。メソッドコールについてはほぼ差はなし。

ベンチマークは下記のスクリプトにて。計測はFirefoxのみで行った。

// ベンチマーク
function bench(funcs, num1, num2) {
    function a(func) {
        var t1 = new Date();
        for (var i = 0; i < num1; i++) {
            func();
        }
        return new Date() - t1;
    }
    var res = {};
    for (var i = 0; i < num2; i++) {
        for (var idx in funcs) {
            res[idx] = (res[idx] || []);
            res[idx].push(a(funcs[idx]));
        }
    }
    var aves = [];
    for (var idx in res) {
        var sum = 0;
        for (i = 0; i < res[idx].length; i++) {
            sum = sum + res[idx][i];
        }
        aves.push(sum / res[idx].length);
    }
    for (var i in aves) {
        console.log((+i + 1) + ': '
                    + (aves[i] * 100 / aves[0]).toFixed(2)
                    + '(' + aves[i].toFixed(2) + 'ms)');
    }
}

// サブクラス方式ロード
var subClassLoad = function() {
    ;(function($) {
        var plugname = 'myplug2';
        $[plugname] = $.subclass();
        var default_params = {};
        $[plugname].fn.pluginit = function(params) {
            $.extend(default_params, params, {})
        }
        $[plugname].fn.method1 = function(params) {return 'myplug1 a'}
        $[plugname].fn.method2 = function(params) {return 'myplug2 b'}
    })(jQuery);
}
// インナークラス方式ロード
var innerClassLoad = function(){
    ;(function($) {
        var plugname = 'myplug';
        var Class = function(elem, params){
            this.elem = elem;
            this.elem.data(plugname, this);
            this.params = params;
        }
        Class.prototype.method1 = function(params){
            return 'myplug a';
        };
        Class.prototype.method2 = function(params) {
            return 'myplug b';
        };
        var default_params = {};
        $.fn[plugname] = function(params){
            return new Class(this, $.extend(default_params, params, {}));
        }
    })(jQuery);
}
// サブクラス方式ロード
var formalLoad = function(){
    ;(function($) {
        var plugname = 'myplug3';
        var methods = {
            init    : function(params){return this;},
            method1 : function(params){return 'myplug3 a';},
            method2 : function(params) {return 'myplug3 b';}
        };
        $.fn[plugname] = 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.' + plugname );
                return this;
            }
        };
    })(jQuery);
}

innerClassLoad();
subClassLoad();
formalLoad();

// インナークラス方式インスタンス化
var innerClassInit = function() {var a = $("#target1").myplug();}
// サブクラス方式インスタンス化
var subClassInit = function(){var b = $.myplug2("#target1");}
// 公式ドキュメント方式インスタンス化
var formalInit = function(){var c = $("#target1");};
// インナークラス方式メソッドコール
var a = $("#target1").myplug();
var innerClassMethodCall = function() {a.method1();};
// サブクラス方式メソッドコール
var b = $.myplug2("#target1");
var subClassMethodCall = function(){b.method1();};
// 公式ドキュメント方式メソッドコール
var c = $("#target1");
var formalMethodCall = function(){c.myplug3('method1');};
// サブクラス方式ロード&インスタンス化
var subClassLoadAndInit = function() {
    subClassLoad();
    subClassInit();
};
// インナークラス方式ロード&インスタンス化
var innerClassLoadAndInit = function() {
    innerClassLoad();
    innerClassInit();
}
// 公式ドキュメント方式ロード&初期化
var formalLoadAndInit = function() {
    formalLoad();
    formalInit();
};
bench([innerClassLoad, subClassLoad, formalLoad], 100000, 5);
bench([innerClassInit, subClassInit, formalInit], 5000, 5);
bench([innerClassMethodCall, subClassMethodCall, formalMethodCall], 1000000, 5);
bench([innerClassLoadAndInit, subClassLoadAndInit, formalLoadAndInit], 10000, 5);

“There are only two hard things in Computer Science: cache invalidation and naming things”

だそうです。そういう訳で、jQueryプラグインのメソッド名が他のプラグインと衝突するのを回避するための設計方法を列挙してみた。今のところ、一番下の方法が自分的にはしっくり来ている。

[2011.02.02追記]  2011年はsub()方式がおすすめです。

jquery.myplugの基本形。基本的に$.fn.extend()は使わない方針。

/**
 * jquery.myplug基本形
 *
 * SYNOPSIS
 *
 * $('#target').myplug();
 * $('#target').myplug({param1 : val1, param2 : val2});
 */
;(function($) {

    var default_params = {
        param1 : 'a',
        param2 : 'b'
    };

    $.fn.myplug = function(params) {

        params = $.extend(default_params, params, {});

        // do something

        return this;
    }
})(jQuery);

複数メソッドを提供したい。

/**
 * jquery.myplug マルチメソッド(悪い例)
 *
 * SYNOPSIS
 *
 * $('#target').myplugMethod1(params);
 * $('#target').myplugMethod2(params);
 */
;(function($) {
    $.fn.myplugMethod1 = function(params) {return this;}
    $.fn.myplugMethod2 = function(params) {return this;}
})(jQuery);

上記はどこでも推奨していない悪い例。myplugというプラグインが$.fn配下にmyplugMethod1とmyplugMethod2という2つの名前を定義しているので、プラグイン間で衝突する可能性がある。

/**
 * jquery.myplug マルチメソッド(別案1)
 *
 * SYNOPSIS
 *
 * $('#target').myplug.method1();
 * $('#target').myplug.method2();
 *
 */
;(function($) {
    $.fn.myplug = {};
    $.fn.myplug.method1 = function(params) {}
    $.fn.myplug.method2 = function(params) {}
})(jQuery);

上記の例では、複数のメソッドを含む構造体を$.fn.myplugという名前で定義している。プラグイン間の衝突は回避できたけど、メソッド内でどうjQueryオブジェクトを取得するのか分からない。

/**
 * jquery.myplug マルチメソッド(別案2)
 *
 * SYNOPSIS
 *
 * $('#target').myplug().method1();
 * $('#target').myplug().method2();
 * $("#target").myplug().method1().myplug().method2();
 */
;(function($) {

    $.fn.myplug = function () {
        var jq = this;
        return {
            method1 : function(){return jq;},
            method2 : function(){return jq;}
       }
    };
})(jQuery);

thisの代わりにjqにjQueryオブジェクトを格納。インターフェースがイマイチだけど、まあまあ有り得る形。

/**
 * jquery.myplug 公式ドキュメント方式
 *
 * SYNOPSIS
 *
 * $('#target').myplug('method1', params);
 * $('#target').myplug('method2', params);
 */
;(function($) {

    var plugname = 'myplug';

    // 全メソッドをここに定義
    var methods = {
        init    : function(params){return this;},
        method1 : function(params){return this;},
        method2 : function(params) {return this;}
    };

    // 以下は共通
    $.fn[plugname] = 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.' + plugname );
            return this;
        }
    };
})(jQuery);

ｊQuery公式ドキュメントでも推奨しているらしい方式。メソッド内ではthisがjQueryオブジェクトだし、開発は今までどおりで分かりやすい。ただ、メソッド名が文字列っていうのは何となく抵抗がある。

/**
 * jquery.myplug インナークラス方式
 *
 * SYNOPSIS
 *
 * var instance = $('#target').myplug(params);
 * instance.method1();
 * instance.method2();
 * instance.method1().method2();
 *
 * var instance2 = $('#target').data('myplug'); // can get the instance later
 */
;(function($) {

    /**
     * プラグインの名称
     */
    var plugname = 'myplug';

    /**
     * 全プラグイン共通のインナークラスコンストラクタ
     */
    var Class = function(elem, params){
        this.elem = elem;
        this.elem.data(plugname, this);
        this.params = params;
    }

    /**
     * メソッドを定義
     */
    Class.prototype.method1 = function(params){
        return this;
    };
    Class.prototype.method2 = function(params) {
        return this;
    };

    /**
     * デフォルトパラメータ
     */
    var default_params = {

    };

    /**
     * 全プラグイン共通
     */
    $.fn[plugname] = function(params){
        return new Class(this, $.extend(default_params, params, {}));
    }
})(jQuery);

プラグインひとつにつき、インナークラスを一つ定義する。元ネタ。インターフェースは、DOMに紐づいたmyplugインスタンスを引き回すのが特徴で、メソッドチェーンもできる。myplugインスタンスは$('#target').data('myplug')などとすれば後から取得できる。広く普及している、DOMを引き回すような方式とは異なるので混乱の元かも知れないけど、今のところ一番無難な方式の気がする。

ここまで来ると、プラグイン間で継承できるようなフレームワーク作ってみようとか、夢が広がる。

あと、同じ名前空間つながりで、イベント処理も必ず$('#target').bind('click.'+plugname, func)ってやっておいたほうが身のためです。すでに痛い目みた。