jQuery で 独自の プラグイン を 作成、開発 しようと思ったので、その方法について少し調べてみました。 ここでは、jQuery プラグイン の 作成方法 についていくつかまとめます。
目次
基本形
まずは最もシンプルなプラグインのコード。 このままだと、 $ が jQuery である保証がなかったり、 $ が別物で $.fn が undefined だったり…
1 2 3 | $.fn.[関数名] = function () { // 拡張するコードを実装 }; |
メソッドチェーン
上述の コード では メソッドチェーン が利用できません。 戻り値を設定することで メソッドチェーン を利用できるようにします。
1 2 3 4 5 6 | $.fn.[関数名] = function () { // 拡張するコードを実装 // メソッドチェーンの有効化 return this ; }; |
無名関数に取り込んだ形
基本形では変数がグローバルに配置されてイロイロとまずいので、無名関数に取り込んで、$ = jQuery
を保証します。
また、window
や document
をローカル変数化することで "気持ち" 高速化しています。
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 の フォロー」 お願いします!!