jQuery プラグイン の 開発

0 件のコメント

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

目次

基本形

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

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

メソッドチェーン

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

1
2
3
4
5
6
$.fn.[関数名] = function () {
    // 拡張するコードを実装
 
    // メソッドチェーンの有効化
    return this;
};

無名関数に取り込んだ形

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

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

1
2
3
4
5
6
7
8
(function (window, document, $, undefined) {
    $.fn.[関数名] = function () {
        // 拡張するコードを実装
 
        // メソッドチェーンの有効化
        return this;
    };
})(window, document, jQuery);

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
(function (window, document, $, undefined) {
    $.fn.[関数名] = function () {
        // 拡張するコード(各要素に依存しないコード)を実装
        // メモ:この function スコープ内の this は jQuery
 
        // メソッドチェーンの有効化
        return this.each(function (index) {
            // 各要素に対する実装
            // メモ:この function スコープ内の this は DOM要素
 
        });
    };
})(window, document, jQuery);

参考記事

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