Loading...

くろーじゃー じゃばすくりぷと - 手習い

5、6年前からの悩みは、クロージャーがよくわからないということでした。
なんとなくはわかりますよ。もちろん。でも、体に染みこまないというかなんというか。
 
 今回は、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 勝亦 勇
4798128457

リアクション: 
クロージャー 3175275112936787080

コメントを投稿

ホーム item

このブログを検索

Random Posts

Popular Posts

Labels

ADS