Javascript MVC 패턴 구현
Javascript MVC 패턴 구현
1. MVC 패턴 정의:
하나의 응용 프로그램을 Model(데이터)계층, View(표현(페이지랜더링))계층, Control(User Interation)계층으로 분리하는 디자인 패턴 중 하나이다.
2. javascript MVC 패턴 정의:
Model: 데이터 객체를 저장하는 창고로 쓰이며, View나 Controler에 대해서 전혀 신경 쓸 필요가 없고, 모델은 데이터, 데이터와 직접적으로 관련이 있는 로직만을 포함하는 것이 좋다.
즉, "이벤트 처리 코드", "뷰 템플릿" 과 같이 모델과 관련 없는 로직등은 포함하지 말아야 한다.
View: 사용자와의 상호작용을 맡는 계층이며, 보통 HTML, CSS, 자바스크립트 템플릿으로 View를 구성한다.
Model과 마찬가지로 View 또한, 에플리케이션의 다른 부분(계층)과 분리되어야 한다.(Controler나 Model 객체와 독립적이어야 한다는 뜻이다.)
Controler: Model과 View 사이의 접착제 역활을 하며, 보통 이벤트를 통해 갱신된 데이터를 Model에 적용하고 그 결과를 View에 반영 시킨다. 또한, 보통 Controler객체 초기화(init)시 각 이벤트 리스너를 추가시키는 로직을 구성한다.
3. 구현한 MVC 패턴 정의:
Model: 등록된 Data Model인 "Concrete(Function 구성)" 객체를 통해 데이터를 Controler에 반환하고, "Entitie(Object(json)구성)" 객체를 통해 등록된 각 데이터 모델을 갱신하고, 유지(Cookie 사용)시킨다.
View: Controler를 통해 등록된 View(Function)를 호출 한다.
Controler: Model과 View 사이의 접착제 역활을 하며, 각 이벤트들을 통해 호출 시킨다.
또한, Model(Concrete, Entitie)를 통해 반환된 결과를 View에 반환 후 호출(렌더링)시킨다.
MVC.js URL:
http://img.fpscamp.com/js/mvc/mvc.js
테스트 URL:
ps. 아직 각 브라우저의 몇가지 잔존 버그가 존재합니다.(테스트 시 크롬 브라우저를 이용을 권장드립니다.^^;;)
4. 실행 예제
// Entities
mvc.Entities('board').append('info', {id: 'yanione', name: 'yanione_name'});
// Concretes
mvc.Concretes('board').append('view', function(entitie){
this.callback(entitie);
});
// Views
mvc.Views('info').append('render', function(ret){
for (var n in ret){
document.body.innerHTML += n + '=' + ret + '
';
}
});
window.onload = function(e){
// Controls, Models
mvc.Controls('boardInfo', mvc.Models(mvc.Concretes.board, mvc.Entities.board), mvc.Views.info).exec('view', 'render', 'info');
}
http://mohwa.org/doc/mvc/index.html
