jQueryプラグインの作り方 ~ 重要な3つのポイント ~
jQueryのプラグインを一言でいうと
「jQueryクラスのメソッド」
ということで、jQueryを一つのクラスと考えそのメソッドを作るということが
「jQueryプラグインを作成する」
ということです。
つまり
- javascriptのオブジェクト指向がわかる
- javascriptのメソッド作成方法がわかる
- jQueryを一つのクラスとして捉える
上記3つのポイントを抑えるだけで、jQueryのプラグインは簡単に作ることができます。
では早速1番目のポイントから書いていきます。
javascriptのオブジェクト指向がわかる
javascriptのオブジェクト指向は少し特殊です。
PHPやJava、rubyなどの場合は
class クラス名 { ~ }
などのように書きます。
一方javascriptの場合は
var クラス名 = function(){ ~ }
と書きます。そうjavascriptの場合
「クラスは関数」
と認識するとかなり楽に入ってきます。
例えば
var dog = function(age, type){ this.age = age; this.type = type; } var dog1 = new dog(5, chiwawa); console.log(dog1.age); console.log(dog1.type);
とすると5歳のチワワが出来上がります。
ここでのポイントは
「javascriptのクラスは関数」
ということ!
javascriptのメソッドの作成方法がわかる
class クラス名 { public function メソッド名(){ } }
などのようにメソッドを作成します。
javascriptの場合は
var クラス名 = function(){ } クラス名.prototype.メソッド名 = function(){ }
という風に作成します。
具体的には
var dog = function(){ } dog.prototype.walk = funtion(){ this.x += 100; }
のように書きます。これでdogクラスにwalkというメソッドを追加することが出来ました。
厳密にいうとprototypeは色々ごちゃごちゃした設計があるようですが、簡単のために今はそういう用に書けばいいのだなという理解で充分でしょう!
というわけでここでのポイントは
「javascriptのメソッドは『クラス名.prototype.メソッド名 = 関数』で作成できる!」
jQueryを一つのクラスとして捉える
というわけでここまで来たら簡単ですね。
jQueryはクラス、そしてプラグインはメソッドを作るということ。
それを踏まえると次のようになります。
jQuery.prototype.メソッド名 = function(){ }
しかしjQueryの場合 prototype ではなく fn を使います。
jQuery.fn.メソッド名 = function(){ }
さらに、グローバル変数に影響を与えないために
(function($){ $.fn.メソッド名 = function(){ } })(jQuery)
とすることでグローバル変数に影響を与えないメソッドが出来上がります。
そこで作成したjQueryプラグインがこちら!
(function($){ $.fn.fade = function(options){ var target = $(this); var options = $.extend({ fade : 'out', time : 400, }, options); var inOut = new Array(); var timer = new Array(); inOut['out'] = {'start': 1.0, 'end': 0.0, 'rate': -0.1}; inOut['in'] = {'start': 0.0, 'end': 1.0, 'rate': 0.1}; var i = inOut[options.fade].start; timer[target] = setInterval(function(){ i += inOut[options.fade].rate; target.css('opacity', Math.floor(i*10)/10); if(Math.floor(i*10) == inOut[options.fade].end*10){ clearInterval(timer[target]); } }, options.time/10); } })(jQuery);
というfadeIn(), fadeOut()の再発明的なメソッドを作成しました。
これのいいところはfadeIn(), fadeOut()では
slowやnormalでしか指定できないが、今回作成したものでは
秒数を細かに指定することが出来ます。
また、この関数一つでfadeIn(), fadeOut()どちらも使えます。
極めつけはfadeIn, Outでは終了後、自動的にhide()されるのに対し、
こちらはhide()されません。
つまり相対位置で指定した場合でも崩れないというメリットがあります!!
というようなプラグインを作成しました。
またオプションの指定なんかは上記のプラグイン例を見てください。
最後のポイントは
「jQueryはクラス、プラグインはメソッド、jQueryプラグインを作成するということはjQueryクラスのメソッドを作成するということ!」
関連記事
【連載】最終回HTML5でCanvasアプリを作る入門編~アニメーションについて~ - nigoblog
【連載】第三回HTML5でCanvasアプリを作る入門編~様々なマウスイベントについて~ - nigoblog
【連載】第二回HTML5でCanvasアプリを作る入門編 ~マウスクリックイベントについて~ - nigoblog
【連載】第一回HTML5でCanvasアプリを作る入門編 ~canvas関連メソッドリファレンス~ - nigoblog
関連図書
- 作者: Stoyan Stefanov,水野貴明,渋川よしき
- 出版社/メーカー: アスキー・メディアワークス
- 発売日: 2012/04/13
- メディア: 大型本
- 購入: 1人 クリック: 124回
- この商品を含むブログ (1件) を見る
パーフェクトJavaScript (PERFECT SERIES 4)
- 作者: 井上誠一郎,土江拓郎,浜辺将太
- 出版社/メーカー: 技術評論社
- 発売日: 2011/09/23
- メディア: 大型本
- 購入: 24人 クリック: 588回
- この商品を含むブログ (12件) を見る
- 作者: David Flanagan,村上列
- 出版社/メーカー: オライリージャパン
- 発売日: 2012/08/10
- メディア: 大型本
- 購入: 12人 クリック: 252回
- この商品を含むブログ (15件) を見る
- 作者: Cody Lindley
- 出版社/メーカー: O'Reilly Media
- 発売日: 2012/12/19
- メディア: Kindle版
- この商品を含むブログを見る
英語だけどかなり読みやすい!