jQuery プラグイン の 開発

jQuery で 独自の プラグイン を 作成、開発 しようと思ったので、その方法について少し調べてみました。 ここでは、jQuery プラグイン の 作成方法 についていくつかまとめます。

目次

• 基本形
• メソッドチェーン
• 無名関数に取り込んだ形
• 再帰的に要素を拡張する形

基本形

まずは最もシンプルなプラグインのコード。 このままだと、 $ が jQuery である保証がなかったり、 $ が別物で $.fn が undefined だったり…

$.fn.[関数名] = function () {
    // 拡張するコードを実装
};

メソッドチェーン

上述の コード では メソッドチェーン が利用できません。 戻り値を設定することで メソッドチェーン を利用できるようにします。

$.fn.[関数名] = function () {
    // 拡張するコードを実装

    // メソッドチェーンの有効化
    return this;
};

無名関数に取り込んだ形

基本形では変数がグローバルに配置されてイロイロとまずいので、無名関数に取り込んで、$ = jQuery を保証します。 また、window や document をローカル変数化することで "気持ち" 高速化しています。 undefined は上書きできるので、 変数化することで undefined を保証します。

このコードは「各要素に対する処理はないが、何か決まった処理を行う」場合に利用できる形になります。

(function (window, document, $, undefined) {
    $.fn.[関数名] = function () {
        // 拡張するコードを実装

        // メソッドチェーンの有効化
        return this;
    };
})(window, document, jQuery);

再帰的に要素を拡張する形

jQuery ではメソッドチェーンを一般的に使うので、プラグインでもそのやり方にならいます。 jQuery で指定される要素は複数なので、 each 関数でそれぞれの要素に対して実装を適用していきます。

参考までに 各スコープにおける this が何かを「メモ」として記載しました…念のため。

このコードは「各要素に対して何か決まった処理を行う」場合に利用できる形になります。

(function (window, document, $, undefined) {
    $.fn.[関数名] = function () {
        // 拡張するコード（各要素に依存しないコード）を実装
        // メモ：この function スコープ内の this は jQuery

        // メソッドチェーンの有効化
        return this.each(function (index) {
            // 各要素に対する実装
            // メモ：この function スコープ内の this は DOM要素

        });
    };
})(window, document, jQuery);

参考記事

• jQuery Learning Center - How to Create a Basic Plugin

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter