初めてのjQueryプラグイン作成(1)

jQueryプラグインを作ってみたので、その概要のまとめ。

予定としては、

• （１）jQueryプラグインの作り方の基本
• （２）カウントダウンプラグインの作成１→対象となる要素が１つのときのカウントダウン
• （３）カウントダウンプラグインの作成２→対象となる要素が複数のときのカウントダウンへ拡張

の３回に分けてメモ予定

（１）jQueryプラグインの作り方の紹介

参考サイト：

本家　http://learn.jquery.com/plugins/

プラグイン説明：http://learn.jquery.com/plugins/basic-plugin-creation/

jQueryの関数の挙動を知る

1-1. jqueryプラグイン関数の書き方

普通、jsで関数を定義するときは以下のように書く
[code lang=”javascript”]
function 関数の名前(){
//処理
};
[/code]

対して、jQueryプラグインとして関数を定義する場合は、以下のように書く
[code lang=”javascript”]
$.fn.関数名 = function(){
//処理
};
[/code]

例えば、要素をすべて緑に変更してしまう関数「greenify()」を定義すると、以下になる
[code lang=”javascript”]
(function($){
$.fn.greenify = function(){
this.css(‘color’, ‘green’);
};
})(jQuery);

//使い方は次のようにする
$(‘a’).greenify();
[/code]
（※cssは、jqueryが提供している関数）

jQueryプラグインは、jQueryそのもののエイリアス「$」を引数にした無名関数として実行することで、
プラグイン中、jQueryを「$」を使って呼び出すことが可能になっているそう。

無名関数として実行することで、JavaScriptライブラリでよく利用されている「$」の衝突を避けつつ、jQueryが提供するメソッドを利用することができるようになっているとのこと。

(逆に言えば、この書き方をしないと「$」を利用したときに、名前空間で衝突起こしてしまうから、避けてねってことか）
（あ、jsでの無名関数の定義は「 (function(){ //処理; }) 」←この書き方。）

1-2. jqueryプラグイン関数にオプションを設定したい場合

[code lang=”js”]
(function($){
$.fn.関数名 = function(options){

//デフォルトのオプション値を設定する
var default_options = {option_key1:option_value1,
option_key2:option_value2
}

//オプションが設定されていた場合、
//該当のデフォルト値を上書きする
var settings = $.extend(true, default_options, options);

//以後、settings.option_key1 として値を利用可能

}
})(jQuery);
[/code]

こんな感じで、$.extendで２番めに渡す引数（default_options）と3番目に渡す引数（options）をマージしてくれる。
だから、ユーザが関数を利用するときに定義した「options」をjQueryでは簡単に引き継いで、利用することができる。

メソッドチェーンさせる仕組み

あと、jQueryの関数って基本的につなげて書くことができる（メソッドチェーン）。

例えば、こんな感じ↓
[code lang=”js”]
$( "a" ).greenify().addClass( "greenified" );
[/code]

これを行わせるため、jQueryプラグインでは必ず、「return this;」を入力する必要がある

例：
[code lang=”js”]
(function($){
$.fn.関数名 = function(options){

//デフォルトのオプション値を設定する
var default_options = {option_key1:option_value1,
option_key2:option_value2
}

//オプションが設定されていた場合、
//該当のデフォルト値を上書きする
var settings = $.extend(true, default_options, options);

//以後、settings.option_key1 として値を利用可能

return this;
}
})(jQuery);
[/code]

「return this;」書かないと、もし自作のjQueryプラグイン関数を利用した場合、そこで処理が途切れてしまうから気をつける

そんなわけで、次回は実際にjQueryプラグインを作ってみる