銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

jQueryプラグインを正しく簡単に作る方法

JavaScript jQuery

キチンとしたjQueryプラグインを簡単に作れる関数をご紹介。

JavaScriptのクラスをそのままjQueryプラグインに変換しちゃうお手軽関数。

ここでは、「jQueryプラグインの作り方」を説明しているのではなくて、JavaScriptのクラスを作れる人なら、「これを使えばすぐできる」って関数を説明しています。


f:id:takamints:20150809144709p:plain

jQuery　仕事の現場でサッと使える! デザイン教科書
jQuery　仕事の現場でサッと使える! デザイン教科書
posted with amazlet at 15.08.09
技術評論社 (2015-05-15)
売り上げランキング: 43,284
Amazon.co.jpで詳細を見る

jquery_plugin_class - クラスをjQueryプラグインにする関数

ということで早速、以下の関数。

function jquery_plugin_class(class_name) {
    jQuery.fn[class_name] = function(method_name) {
        var args = Array.prototype.slice.call(arguments, 1);
        var invoke = function(element) {
            var ctor = window[class_name];
            if(element[class_name] == null) {
                element[class_name] = new ctor(element);
            }
            return ctor.prototype[method_name].apply(
                    element[class_name], args);
        };
        if(this.length == 1) {
            return invoke(this[0], class_name, method_name, args);
        }
        return $(this).each(function() {
            invoke(this, class_name, method_name, args);
        });
    };
}

プラグイン化したいクラス名を指定して呼び出しておけば、そのクラスを jQueryプラグインとしても使えるようになります。以下のサンプルをご覧ください。

サンプル

以下はクラスをプラグイン化するサンプルです。

//プラグイン化したいクラス名を指定して呼び出す。
//ここで呼んでるけどクラス定義の後でも良い
jquery_plugin_class("hovercolor");

//以下は普通のクラス定義。
//指定要素にHoverイベントを設定して、マウスホバーで
//色を変化させるクラス
function hovercolor(element) {
    this.element = element;
}
hovercolor.prototype.create = function(option) {
    this.opt = option || {
        bgc:'yellow',
        fgc: 'black'
    };
    this.deg = 0;
    var $obj = $(this.element);
    this.bgc = $obj.css('background-color'); 
    this.fgc = $obj.css('color'); 
    $obj.hover(
        function() {
            $obj.css('background-color', this.opt.bgc)
                .css('color', this.opt.fgc);
        }.bind(this),
        function() {
            $obj.css('background-color', this.bgc)
                .css('color', this.fgc);
        }.bind(this)
    );
    return $(this.element);
};

使用例

以下のようにプラグインとして使用できます。

$(function() {
    $("li").hovercolor("create", {bgc:'cyan', fgc:'#880000'});
    $("p").hovercolor("create", {bgc:'#ffcc66', fgc:'black'});
    $("a").hovercolor("create", {bgc:'yellow', fgc:'red'});
});

※ メソッドチェーンの例を示すべきでしたが、またそのうち。

制限＆注意事項

ちょっとした制限として、(1)コンストラクタが必ずDOM要素を受け取らなくてはならないのと、(2)必ず生成のためのメソッドを作るべきという点があります。

「キチンとしたjQueryプラグイン」とは

ここで、「キチンとしたjQueryプラグイン」とは、以下3つの基本的なインターフェースに従っているということです。

  1. 複数要素をまとめて扱える（インスタンス化・メソッド呼び出し)
  2. メソッドチェインできる。
  3. 単一要素については、(メソッドチェインでなく)値を返すことも可能。ゲッターのような使い方ですね。

上の関数は、この３つのインターフェースを、ひとつの関数にまとめているということです。 プラグイン固有の機能は、クラス内に実装できます。

jQueryプラグインのスタイル

これを利用して構築されたプラグインは、__jQuery-UI 的なプラグインになります。つまり、jQuery-UI と同じように使えます。

__プラグインのすべての操作を単一のメソッドで行うもので、プラグインの実質的なインスタンスメソッドは、その第1引数で文字列によって指定します。第2引数以降の解釈はその機能に応じて変化します。

引数リストはクラスの定義に明示できますので、少しだけわかりやすいかも。

ライセンス等

権利についてはオールフリー。何もかも放棄してGitHub Gistに置いていますので、ご自由にコピペでもなんでもヨロシクどうぞという状態。かわりに、なんら責任は負いませんので、そこんとこだけヨロシクです。

所感

夜中に思いついて作ったのですが、自分の中にあったjQueryプラグイン作成に対する敷居が下がりました。

プラグインをたくさん作る場合に楽ができます。 クラスを作り慣れている人なら特に。

別サイトMZ-700フルJavaScriptエミュレータ では、画面表示関係全般のプラグインを、これを使って書いています。Z80やアセンブラってナニ？って興味のある人も是非どうぞです。

bicycle.life.coocan.jp

動作速度は多少オーバーヘッドがありますね。でも遅すぎて使えないというようなこともありません。 速度を追求するなら、そのように実装したクラスを直接使えば良いだけ。 メソッドチェーンを利用したり、jQuery使ってるぞ感を出す（？）にも便利です。