jQuery入門講座使い方-クロージャ(3)

クロージャ(3)

引数を利用する

クロージャ（オリジナル）に作成したfunctionは引数を受け取ることもできます。サンプル（05/05_01.html）を開き、オリジナルの作成部分を確認して下さい。

下記ソースの5行目、countUpの機能を設定しているfunctionの（）に変数iが追加されているのを確認して下さい。この変数で送られてくる引数を受け取ります。受け取った引数は6行目で利用され、カウント用の変数cntに加算されます。つまりカウントは引数で渡された分だけ増加します。

//---クロージャ（オリジナルの作成）
function countMaster() {
	var cnt = 0;
	var myObj = new Object();				
	myObj.countUp = function (i) {
		cnt += i;
		$(".cnt").text(cnt);
	}
	myObj.getCnt = function () {
		return cnt;
	}
	return myObj;
}

次はcountUpに引数を送っている部分を確認します。以下の様にupボタンをクリックされたときに実行するcountUpで引数10を渡すようにしました。そのため、このサンプルではupボタンをクリックするとカウントが10ずつ上がっていくのです。

$(".up").click(function () {
	cntObj.countUp(10);
})

インスタンス作成時にも引数を利用

インスタンス作成時にも引数を利用することが可能です。サンプル（05/05_02.html）を開いてオリジナルの作成部分を確認して下さい。以下１行目のように変数elemで引数を受け取るようにしました。ここでは要素を受け取る予定なので、2行目でjQueryで扱えるようにjQueryオブジェクトにして変数myTargetに代入します。

そして7行目で実際にmyTargetを利用しました。ここではtextメソッドを利用して指定した要素にカウンタの数字を表示するので、このサンプルではインスタンス作成の際に受け取った要素にカウンタを表示します。

function countMaster(elem) {
	var myTarget = $(elem);
	var cnt = 0;
	var myObj = new Object();
	myObj.countUp = function (i) {
		cnt += i;
		myTarget.text(cnt);
	}
	myObj.getCnt = function () {
		return cnt;
	}				
	return myObj;
}

続いてインスタンス作成の部分を確認して下さい。以下の様にcountMasterを実行する際に引数で「.cnt」を渡すようにしました。このためcntクラスの付いた要素にカウンタの数字を表示するようになるというわけです。

//---クロージャ（インスタンスの作成）
cntObj = countMaster(".cnt");

複数のカウンタを操作

クロージャは複数の似たような機能をコントロールするのに役に立ちます。これまでのサンプルではカウンタが１つのため、クロージャを利用するメリットがありません。ですのでサンプル（05/05_03.html）では複数の要素にそれぞれカウンタの機能を付けてみました。

まず着目するのはオリジナルの作成部分です。ここはサンプル05/05_02.htmlから変更ありません。クロージャは完成させてしまえば、オリジナルのソースを変更することはないのです。変更しているのは利用する部分です。

まずはbody内にカウンターのセットを２組用意しました（idがteam_A,team_Bの2つのdivで囲んでいます）。そしてこの２つのセットに対してクロージャのインスタンスを設定します。jQueryの以下の部分を確認して下さい。

//------------TEAM A
cntObj_A = countMaster("#team_A>.cnt");
$("#team_A>.up").click(function () {
	cntObj_A.countUp(10);
})
$("#team_A>.disp").click(function () {
	var cnt = cntObj_A.getCnt();
	alert(cnt);
})

まず2行目で初期化の設定をしています。ここでteam_Aのidに囲まれた方の.cntを引数で設定したので、返値として受け取ったcntObj_Aを操作するとteam_Aのcntにカウンタが表示されます。そして実際にcntObj_Aを利用する部分は4行目と7行目です。

ここでサンプル05/05_02.htmlと比較して、上記の赤字部分意外は全て変更がないことを確認して下さい。クロージャは完成させてしまえばインスタンスも、ほとんど変更無しで利用できるのです。そしてteam_Bの方も上記赤字の部分が異なっているだけです（countUpの引数には5を設定しました）。

このようにクロージャは似たような機能を複数作成する際に効果を発揮します。これはflashのクラスのような感じです。しかしムービークリップのように簡単に利用できるレベルではないので、引き続き研究する予定です。

次のページ：クロージャ(4)の予定