대부분의 Javascript 라이브러리에는 기본 Javascript 이벤트 처리의 크로스 브라우저 구현이 있어서 DOM 이벤트가 트리거될 때 호출될 함수를 연결할 수 있다. 이는 유용하지만 Dojo에서는 한층 더 진보된 개념을 취하여 함수를 다른 함수와 연결할 수 있게 하며, 이러한 것으로는 DOM 이벤트, 오브젝트 이벤트, 사용자 정의 함수 또는 "주제(이 섹션에서 나중에 논의함)"가 있다.
DOM 이벤트에 함수를 연결하는 첫 번째 방법은
dojo.connect 함수를 사용하는 것이다. 이점을 확인할 수 있는 가장 좋은 방법은 예제를 사용하는 것이다. Firebug 콘솔에서 목록 13에 있는 코드를 입력한다.목록 13.
dojo.connect를 사용하여 함수를 DOM 이벤트에 연결var message = dojo.byId("message");
dojo.connect(message, "onclick", function() {
alert(message.innerHTML);
});
|
이렇게 하면 목록 14와 같은 결과가 콘솔에 표시된다.
목록 14. 결과
>>> var message = dojo.byId("message"); dojo.connect..., function()
{ alert(message.innerHTML); });
[div#message, "onclick", function(), 1]
|
결과는 우수하지만, 실제로 무엇인가를 수행할 만한 함수는 전혀 아니다. Dojo는 ID가 "message"인 요소의
click 이벤트 핸들러에 함수를 연결했다. 시험해 보려면 "This is a DIV element with id attribute message" 컨텐츠가 있는 화면에서 해당 메시지를 클릭한다. 그림 4와 같은 Javascript 경보 상자가 표시된다.그림 4. DOM 이벤트에 함수 연결
멋지지 않은가? 배열에 있는 모든 항목에 이벤트를 연결하려면 어떻게 해야 할까? 예를 들어, 해당 페이지에서 순서없는 목록의 각 항목을 클릭하면 이 항목이 굵은체로 강조되도록 하려고 한다고 하자. 목록 15에 있는 코드를 사용하면 이 작업을 손쉽게 수행할 수 있다.
목록 15. 요소의 배열에 이벤트 연결
dojo.query("#list li").forEach(function(item) {
dojo.connect(item, "onclick", function() {
dojo.style(item, {
fontWeight: "bold"
});
});
});
|
시험해 보면 제대로 작동할 것이다. Dojo를 이용하면 훨씬 더 간결한 방법으로 코드를 작성할 수 있다.
forEach를 사용하여 배열을 반복하는 대신, 목록 16과 같이 NodeList.connect 바로 가기 함수를 사용하여 이 작업을 수행할 수 있다.목록 16. 요소로 구성된 배열에 이벤트 연결(개선됨)
dojo.query("#list li").onclick(function(e) {
dojo.style(e.target, {
fontWeight: "bold"
});
});
|
이미 목록에 이벤트를 연결했으므로 목록 16에 있는 코드를 시도하여 작동하는지 확인하기 전에 페이지를 다시 고친다.
e 인수는Event 오브젝트에 대한 참조이며 이 오브젝트의 target 특성을 이용하여 이벤트가 개시된 요소를 식별할 수 있다. 이 특성을 사용하여 굵은체로 스타일이 지정되어야 하는 요소를 식별한다. 목록의 세 가지 항목을 클릭해 보면, 클릭한 후에는 각 항목이 굵은체로 바뀐다.
이전 예제에서는 함수를 DOM 이벤트에 연결했다. Dojo에서는 이와 같은 방법으로 함수를 다른 함수에 연결할 수 있다. 이러한 예는 물레 이미지를 페이지의 어딘가에 표시하는 함수가 될 수 있다. 사용자가 Ajax 함수를 수행할 때, 이 이미지가 표시되게 하려고 한다. 마찬가지로 이 함수가 응답을 리턴하면 이 이미지를 숨기고 싶다.
dojo.connect를 사용하지 않으면 코드는 목록 17과 같은 형태가 된다.목록 17.
dojo.connect를 사용하지 않고 함수를 다른 함수에 연결하기function toggleImage() {
//Code to show/hide loading image goes here
}
function callAjax() {
toggleImage();
//Code to call Ajax function goes here
}
function handleResponse() {
//Code to handle Ajax response goes here
toggleImage();
}
|
이 코드에는 아무런 문제가 없지만,
callAjax와 handleResponse 함수에서 toggleImage 함수가 수정되었다. 또 다른 함수 호출을 추가할 경우에는 이러한 함수를 수정하여 추가 호출이 포함되도록 해야 한다. 함수 자체에 함수 호출을 추가하는 대신에dojo.connect를 사용하여 이러한 함수를 서로 연결할 수도 있다. 목록 18에는 dojo.connect 메소드를 사용하는 방법이 표시되어 있다.목록 18.
dojo.connect를 사용하여 함수를 다른 함수에 연결function toggleImage() {
//Code to show/hide loading image goes here
}
function callAjax() {
//Code to call Ajax function goes here
}
function handleResponse() {
//Code to handle Ajax response goes here
}
dojo.connect(callAjax, toggleImage);
dojo.connect(handleResponse, toggleImage);
|
이러한 코딩 스타일이 모든 개발자에게 적합한 것은 아니지만, 이렇게 하면 코드를 훨씬 더 읽기 쉽게 하는 방식으로 코드를 체계화할 수 있다.
언급할 만한 가치가 있는 Dojo 이벤트 처리의 궁극적 특성은 주제에 발행하고 등록하는 기능에 있다. 이 기능은 Dojo 컴포넌트가 서로의 존재를 인식하고 있지 않은 경우에도 서로 상호 작용할 수 있게 한다. 예를 들어, 개인의 성명이 있는
message 오브젝트가 예상되는printName이라고 하는 주제를 정의하고 있었다고 하자. 그러면 이 주제에 등록하고, 또 다른 컴포넌트가 개인의 이름으로 이 주제에 발행할 때마다 콘솔에 이름을 표시하는 컴포넌트가 있을 수 있다. 목록 19에는 이러한 등록을 하는 예제가 표시되어 있다. (Firebug에서 이 예제를 자유롭게 사용해 보자.)목록 19. 등록
dojo.subscribe("printName", function(msg) {
console.log("The person's name is: "+msg.first_name+" "+msg.last_name);
});
|
이 주제에 발행하려면 해당 주제의 API에 연결된 오브젝트의 배열을 전달해야 한다. (이 경우에는 오브젝트에 성과 이름이 포함되어 있어야 한다.) 목록 20에 예제가 표시되어 있다.
목록 20. 주제에 발행하기
dojo.publish("printName", [
{
first_name: "Joe",
last_name: "Lennon"
}
]);
|
이 코드의 결과는 목록 21과 같다.
목록 21. 결과
>>> dojo.publish("printName", [ { first_name: "Joe", last_name: "Lennon" } ]);
The person's name is: Joe Lennon
|
아는 바와 같이 이 오브젝트를
출처: http://www.ibm.com/developerworks/kr/library/wa-ground/printName 주제에 발행하면, 등록 함수가 해당 메시지를 콘솔에 출력한다.
댓글 없음:
댓글 쓰기