Object.watch 를 이용한 데이터 바인딩 2

http://scaleform.minarto.com/342 에서 이어집니다

앞선 포스팅에서 작성한 코드로도 뭐 일단 돌아가긴 잘 돌아갑니다만... 좀 더 개선해보도록 하겠습니다.

as2 는 클래스가 아닌 함수기반의 언어로서 언제든 함수의 실행컨텍스트를 변경할 수 있습니다.

그리고 해당 함수가 실행되는 컨텍스트는 this로 가르치게 됩니다.

as2에서 작성하고 계시는 class 기반의 this 는 실제의 class 기반에서 만들어진 객체를 가르키는 this를 가르키는 것과는 차이가 있다는 말입니다.

예를 들어, button.onPress 에 함수를 정의하면, this가 button을 멤버변수(또는 객체?)로 가지고 있는 인스턴스를 가르키는 것이 아니라 button 을 가르키는 것을 말합니다.

하지만 여러분이 Delegate 를 사용해보셨고, 그 함수를 까봤다면(?) this를 마음껏 변경도 가능하단 걸 아실겁니다.

뭐 어쨌든 실행 컨텍스트가 변경된 셈이죠...

일단 bind 라는 함수를 하나 작성해보겠습니다.

function bind($t) {

$t.__binds__ = [];

$t.__bindHandler__ = function($p, $old, $new){

if ($old === $new) return;

for (var i:Number = 0, c:Number = this.__binds__.length; i < c; i += 2) {

this.__binds__[i].call(this.__binds__[i + 1], $new);

}

return    $new;

}

return $t;

}

일단 기본은 이정도일 겁니다.

바인딩할 객체를 인자로 받아서 내부에 __binds__ 라는 배열을 생성합니다.

이 배열은 내부에 나중에 실행하게 될 함수와 함수스코프를 담게 됩니다.

그리고 __bindHandler__ 라는 함수를 하나 만듭니다.

이건 해당 키의 값이 변경될 시에 실행할 함수입니다. 이 함수가 실행되면서 앞서 담아둔 배열을 돌려서 각 함수를 실행하죠.

꼭 실행함수가 scope 를 가질 필요는 없으니 null 도 처리하도록 함수실행에는 call (http://help.adobe.com/ko_KR/FlashPlatform/reference/actionscript/2/00001079.html#1284017) 을 썼습니다.

$t.addBind 라는 키 값을 만들겠습니다. 그리고 그 함수는 다음과 같이 정의할 수 있습니다.

function addBind($key, $handler, $handlerScope) {

var binds:Array = this["__binds__"];

for (var i:Number = 0, c = binds.length; i < c; i += 2) {

if (binds[i] === $handlerScope && binds[i + 1] == $handler) {

return this;

}

}

binds.push($handler, $handlerScope);

this.watch($key, this["__bindHandler__"]);

return this;

}

this 가 바인딩할 객체라는 가정하에서 정의한 함수입니다. 인자가 더욱 간단해졌습니다.

그리고 함수의 스코프도 상황에 따라 필요없다고 했으니, 마지막 인자를 생략하고 사용해도 됩니다.

그러니 실행시에는

player.addBind("level", function);

이런 간단한 작성만으로도 되는 것이고, this 를 마지막에 리턴하게 되니

player.addBind("level", function).addBind("gold", function).addBind("name", function).addBind("silver", function);

이런 식으로 체이닝 패턴으로의 작성도 가능합니다.

코드가 많아지니 다음 포스팅 ( http://scaleform.minarto.com/344 ) 으로 넘어가죠...