보통 웹어플리케이션을 구현하는 과정에서 항상 나오는 얘기는 MVC 패턴으로 뷰와 모델, 컨트롤러를잘 분리해서 개발을 해야한다 라는 것이다.
이런 과정에서 지금껏 아무생각 없이 자바스크립트 언어를 사용해오던 방식 - 자바스크립트를 화면 랜더링,property변경, form유효성검증 등의 HTML 의 보조용도로 사용해 오던 것 - 이 아니라, 화면 계층의 메인 프로그램언어로서 사용하게 됨으로써 점점 복잡한 스크립트 언어를 사용하게 되고 요즘에서는 Ajax 라는 용어로 요약되는것 처럼, 잘못된스크립트 코드의 남용은 곧바로 유지보수가 거의 불가능한 스파게티 코드를 양산해내게되고 있다.
일단 자바스크립트라는 것을 이해하는 차원에서 위의 MVC 모델을 적용해서 이해해볼 필요도 있겠다. 약간은 억지스런 느낌도 있지만, 이렇게 이해하면 나름대로 머릿속에 쏙쏙.. 들어오는 느낌을 가질수 있겠다.
코드 예
[CODE]
function sample(id, element){
this.id = id;
this.div = element;
this.div.onclick = this.clickHandler;
}
[/CODE]
위와 같은 함수를 만들었다고 생각하자. 이경우 각각 모델, 뷰, 컨트롤러에 해당하는 부분은 어떻게 적용할 수 있을까?
1. 모델 : sample 이라는 객체 자체가 일종의 모델이라고 할 수 있다. id 와 div 속성을 가지고 있는 모델.
2. 컨트롤러 : 모델의 div 객체의 onclick 이벤트를 처리하는 함수가 clickHandler 라고 연결 되어 있는데, 이때 이벤트를 처리하는 이 clickHandler 라는 함수가 컨트롤러라고 생각할 수 있다.
3. 뷰 : sample 함수를 호출할때 넘어오는 객체 element 는 뷰단에서 이벤트를 발생시킨 객체를 의미한다. element라는 파라미터로 넘어온 객체가 뷰라고 할 수 있다.
이렇게 자바스크립트 코드내에서도 MVC 를 적용해서 생각한다면 스크립트 내에서 이벤트를 처리하는 함수를 구현하거나 이해할 때 혼란스러운 부분을 줄일 수 있을 것 같다.
즉 브라우저가 동작하는 방식에서 이해해본다면 브라우저는 DOM 엘리먼트를 클릭하는 경우 해당 이벤트의 처리 함수의컨텍스트로 DOM 엘리먼트를 지정하게 되고 이 이벤트의 정보를 담은 Event 객체를 생성해서 인자로 넘겨주게 된다는 의미.
'재미' 카테고리의 다른 글
| 행복 + 웃음 + 엘프 + 크리스마스 (바이러스 맞군요) (0) | 2006.12.23 |
|---|---|
| Douglas Crockford Video: Advanced JavaScript (0) | 2006.12.06 |
| 제 1회 루비 세미나 다녀왔습니다. (8) | 2006.11.27 |
| JavaScript 에서 Prototype 객체를 사용해서 함수를 추가하는 이유? (0) | 2006.09.12 |
| 나는 자애로운 군주(Benevolent Ruler) ?? (0) | 2005.10.31 |
