くろーじゃー じゃばすくりぷと - 手習い
2013/10/02
ant
javascript
jquery
クロージャー
５、６年前からの悩みは、クロージャーがよくわからないということでした。
なんとなくはわかりますよ。もちろん。でも、体に染みこまないというかなんというか。
今回は、jqueryのイベントハンドラ登録使ってみました。
登録する際に関数を登録しますが、この関数に引数を渡したいなーと思ったわけです。
で、最近,ジョンレシグさんの翻訳本をぱらぱら勉強しているのですが、なんかちょっとわかった気がしたんですよね。
クロージャーを使えば、渡された引数の値を内部で保持できることがわかったので、以下、かなりわかりづらいサンプル。
モダンなjavascripitでは、htmlにインラインでイベント設定しないのがはやりっぽいので、jquery使って、ロード時にイベントハンドラを登録。その際の関数を返す関数を引数つきで実行させて、それがハンドラごとのパラメータ値になるイメージです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タイトル</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
function initThisPage() {
// 関数を返すようにして、返す関数がイベントに反応するようにしたい。
// 渡された引数をクロージャーからみえる
var f = function(a, nf){
var len = a;
var nf = nf;
return function(){
// 桁数が指定された桁より大きいと反応するようにする
if(this.value.length >= len){ alert('*** bingo' + nf);}
};
};
// id=txtに何か入力したら反応するように設定
$('#txt').keyup(f(3, '#btn'));
}
</script>
</head>
<body onload="initThisPage()">
<input id="txt" type="text" size="4" max="6">
<br/>
<button id="btn">aaaaa</button>
</body>
</html>
ninjya本ためになります。
JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmers’ SELECTION)
ジョン・レシグ John Resig ベア・ビボー Bear Bibeault 勝亦 勇
