이벤트 에미터(EventEmitters)

* 퓨즈 v0.30부터 지원됩니다.

이벤트 에미터(EventEmitters)

EventEmitter는 이벤트를 송수신할 수 있게 해주는 클래스입니다. 퓨즈의 자바스크립트 모듈 대부분은 EventEmitter 클래스의 인스턴스입니다. 즉, 이 모듈에 정의된 메소드를 사용하여 모듈에서 정의한 이벤트에 대한 작업을 수행할 수 있습니다.

임포트 방법

1
var EventEmitter = require("FuseJS/EventEmitter");

기본적인 사용법

아래의 코드는 2개의 EventEmitter를 생성하고 리스너를 연결한 다음 이벤트를 발생시키는 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<App>
    <JavaScript>
        var EventEmitter = require("FuseJS/EventEmitter");
        var myEmitter = new EventEmitter("myEvent1", "myEvent2");

        myEmitter.on("myEvent1", function(arg) {
            console.log("myEvent1 fired with " + arg);
        });

        myEmitter.on("myEvent2", function(arg) {
            console.log("myEvent2 fired with " + arg);
        });

        myEmitter.emit("myEvent1", "an arg");
        myEmitter.emit("myEvent2", "an arg");
    </JavaScript>
</App>

이벤트를 통한 바인딩

시간이 지남에 따라 값이 바뀌는 경우는 일반 콜백 대신 Observable을 사용하는 것이 편리할 수 있습니다. EventEmitters로 쉽게 사용이 가능합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<App>
    <JavaScript>
        var EventEmitter = require("FuseJS/EventEmitter");
        var myEmitter = new EventEmitter("myEvent");
        exports.obs = myEmitter.observe("myEvent");
        setTimeout(function ()
        {
            myEmitter.emit("myEvent", {name:"First string."}, {name:"Second string."}, {name:"Third string."});
        }, 1000);
    </JavaScript>
    <StackPanel>
        <Each Items="{obs}">
            <Text Value="{name}" />
        </Each>
    </StackPanel>
</App>

일회용 리스너

한번 이벤트를 받은 후에는 사라지는 리스너입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<App>
    <JavaScript>
        var EventEmitter = require("FuseJS/EventEmitter");
        var myEmitter = new EventEmitter("myEvent");

        myEmitter.once("myEvent", function(arg) {
            console.log("myEvent fired with " + arg);
        });

        myEmitter.emit("myEvent", "an arg");
        myEmitter.emit("myEvent", "an arg");// 이건 반응이 없음
    </JavaScript>
</App>

이벤트를 통한 프라미스(Promises) 생성

일회용 리스너(once)를 사용하는 대신 자바스크립트 프라미스를 생성할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<App>
    <JavaScript>
        var EventEmitter = require("FuseJS/EventEmitter");
        var myEmitter = new EventEmitter("myEvent");

        var prom = myEmitter.promiseOf("myEvent");
        prom.then(function(args) {
            debug_log("Success: " + args);
        }).catch(function rejected(reason) {
            debug_log("Error: " + reason);
        });

        if(true) myEmitter.emit("myEvent", "Success!");
        else myEmitter.emit("error", "Error!");
    </JavaScript>
</App>

에러 핸들링

위 예제를 참고하세요.

1
myEmitter.emit("error", "an error occurred :(");

“error”에 대응하는 어떠한 리스너도 없다면 예외(exception)를 발생시킵니다.

[[ 동영상 강좌(재생 목록 버튼을 누르세요) ]]

Was this article helpful?

Related Articles