関数クロージャーについて
[参考URL:http://livedocs.adobe.com/flex/3_jp/html/help.html?content=03_Language_and_Syntax_21.html]
addEventListennerなどで、いちいちイベントハンドラを作成していませんか?
そんな時は関数クロージャーがお勧めです。
関数クロージャーを活用する事により、より汎用的ですっきりとしたコードにする事が出来ます。
以下において、その活用例を紹介いたします。
関数クロージャーを使用しない一般的なイベントリスニングのパターンは以下の通り
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; /** * ボタンクリックでタイマーを処理するサンプル */ private function timerBtn_clickHandler():void { // タイマーの作成 var timer:Timer = new Timer(1,1000); // タイマーイベントをリスニング timer.addEventListener(TimerEvent.TIMER, timerHandler); // タイマースタート timer.start(); } private function timerHandler(event:TimerEvent):void { Alert.show("タイマーです"); //タイマーストップ Timer(event.currentTarget).stop(); } ]]> </mx:Script> <mx:Button id="timerBtn" click="timerBtn_clickHandler()" x="309" y="64" label="ボタン"/> </mx:Application>
上記の様に、2つのイベントハンドラにおいて処理を行います。
明確に処理の分断を行うシーンでは、上記の様に実装すべきですが、
ちょっとした処理などでイベントハンドラを乱立させては、分かりづらいコードになってしまいます。
以下は、クロージャーを使用したサンプルになります。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; /** * ボタンクリックでタイマーを処理するサンプル */ private function timerBtn_clickHandler():void { // タイマーの作成 var timer:Timer = new Timer(1,1000); // 関数クロージャーの作成 var timerHandler:Function = function(event:TimerEvent):void { Alert.show('タイマーです'); timer.stop(); } // タイマーイベントをリスニング timer.addEventListener(TimerEvent.TIMER, timerHandler); // タイマースタート timer.start(); } ]]> </mx:Script> <mx:Button id="timerBtn" click="timerBtn_clickHandler()" x="309" y="64" label="ボタン"/> </mx:Application>
関数クロージャーを作成し、タイマーイベントのリスニング時に
作成したクロージャーを指定しました。
更に省略したパターンは以下の通り。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.controls.Alert; /** * ボタンクリックでタイマーを処理するサンプル */ private function timerBtn_clickHandler():void { // タイマーの作成 var timer:Timer = new Timer(1,1000); // タイマーイベントをリスニング timer.addEventListener(TimerEvent.TIMER, function(event:TimerEvent):void { Alert.show('タイマーです'); timer.stop(); }); // タイマースタート timer.start(); } ]]> </mx:Script> <mx:Button id="timerBtn" click="timerBtn_clickHandler()" x="309" y="64" label="ボタン"/> </mx:Application>
上記では、タイマーイベントリスニング時に直接関数をコーディングしました。
とてもすっきりしたコードになります。
更に、関数クロジャーの定義により再帰呼び出しなども可能となりますので
知っておくと活用シーンは多くなります。
是非、お試しください。