[자 바스 크 립 트 의 급증 하 는 사고 04] MVC 와 Backbone. js (베타)

머리말
최근 에 전단 면 시험 문 제 를 많이 정 리 했 습 니 다. 오늘 또 면접 을 보 러 갔 습 니 다. 여러분 들 이 귀 찮 으 신지 모 르 겠 습 니 다. 저 는 어쨌든 좀 피곤 합 니 다. 그래서 우 리 는 오늘 우리 가 얼마 전에 연 구 했 던 문제 로 돌아 가 MVC 를 다시 보 겠 습 니 다.
MVC 가 뭐야?
다시 이 문제 로 돌 아 왔 습 니 다. 도대체 무엇이 MVC 입 니까?
MVC 는 디자인 모델 로 그 는 응용 을 다음 과 같이 나 누 었 다.
① 데이터 (모델, 모델)
② 표현 층 (보기, view)
③ 사용자 상호작용 (컨트롤 러, 컨트롤)
하나의 사건 이 발생 하 는 과정 은 다음 과 같다.

①          
②             
③            ，       
④           

         ：

①             
②             
③                
④        
⑤             

이상 의 과정 은 매우 간단 하지만 복잡 한 상황 이 있 기 때문에 우 리 는 각 부분 을 뚜렷하게 분할 할 것 이다. 그러면 각 부분 은 독립 적 으로 개발 하고 테스트 와 유 지 를 편리 하 게 하 며 결합 을 해제 하 는 데 도움 이 된다.
모형.
모델 은 사용자 목록, 그들의 속성 과 모델 과 관련 된 모든 논 리 를 저장 하기 위해 사용 되 는 모든 데이터 대상 을 저장 합 니 다.
모델 은 보기 와 컨트롤 러 의 디 테 일 을 알 필요 가 없습니다. 모델 은 데이터 와 이 데이터 와 직접 관련 된 논리 만 포함 해 야 합 니 다.
모든 이벤트 처리 코드, 보기 템 플 릿, 그리고 모델 과 무관 한 논 리 는 칼 모형 을 제외 해 야 합 니 다.
모델 과 보기 코드 가 혼 합 된 것 은 MVC 규칙 을 위반 한 것 이다.
컨트롤 러 가 서버 에서 데 이 터 를 가 져 올 때 그 는 데 이 터 를 모델 인 스 턴 스 로 포장 하고 간단 한 예 를 들 어 보 았 다. 그렇지 않 으 면 우 리 는 모두 어 지 러 웠 다.

1 var user = User.find('   ');
2 user.destroy();

어 때? 간단 하지? 일단 신경 쓰 지 마. 나중에 얘 기 할 게.
보기
보기 층 은 사용자 에 게 나타 나 고 사용자 와 상호작용 을 합 니 다.
js 에서 보 기 는 대부분 HTML + CSS + Javascript 템 플 릿 으로 구성 되 어 있 으 며 템 플 릿 에는 간단 한 조건 문 구 를 제외 하고 다른 논리 가 없습니다.
보 기 는 모델 과 컨트롤 러 가 무엇 을 했 는 지 알 필요 가 없습니다. 보기 에서 논 리 를 처리 하 는 코드 가 적어 야 합 니 다.
컨트롤 러
컨트롤 러 는 보기 와 모델 사이 의 유대 입 니 다. 컨트롤 러 는 보기 에서 이벤트 와 입력 을 가 져 옵 니 다. (이 벤트 는 보기 에서 유래 합 니 다) 그들 을 처리 하고 보 기 를 업데이트 합 니 다.
페이지 를 불 러 올 때 컨트롤 러 는 보기 에 이벤트 감청 을 추가 합 니 다. 사용자 와 응용 이 상호작용 을 할 때 컨트롤 러 의 이벤트 트리거 가 작 동 합 니 다.

var Controller = {};
(Controller.users = function ($) {
    var nameClick = function () {};
    //          
    $(function () {
        $('#view').click(nameClick);
    })
})(jQuery);

이 알 수 없 는 코드 가 바로 우리 의 컨트롤 러 이다.
PS: 지금 여러분 들 은 어 지 러 워 보 이 는 것 이 정상 이 라 고 생각 합 니 다. 제 가 몇 번 을 연 구 했 는데 도 어 지 러 워 요. 불 임 이 라면 울 것 같 아 요.
여기 서 MVC 를 상세 하 게 소개 하 는 것 이 아니 기 때문에 더 이상 말 하지 않 겠 습 니 다. 뒤에 우 리 는 MVC 라 는 것 을 연구 하 는 단독 시리즈 가 있 을 것 입 니 다. 우 리 는 BackBone 에 들 어가 공부 합 시다.
백 본 이 뭐야?
Backbone 은 javascript 응용 프로그램 을 구축 하 는 우수한 라 이브 러 리 로 간결 하고 경량급 이지 만 그 는 기능 이 완비 되 어 모든 기초 기능 을 커버 하 는 동시에 유연성 도 높다.
이 라 이브 러 리 는 model, contrller, view 를 제공 하여 우리 가 응용 프로그램 을 구축 하 는 구 조 를 구성 했다.
백 본 은 4k 에 불과 하고 모델, 이벤트, 집합, 보기, 컨트롤 러 와 지구 화 등 핵심 개념 만 제공 합 니 다.
PS: backbone 은 underscore. js 에 의존 합 니 다.
모형.
모델 은 응용 프로그램의 데 이 터 를 저장 하 는 곳 입 니 다. 우 리 는 모델 을 응용 프로그램의 원시 데이터 에 대해 정 성 스 럽 게 디자인 한 추상 이 라 고 상상 할 수 있 고 도구 함수 와 사건 을 추가 할 수 있 습 니 다.

1 var User = Backbone.Model.extend({
2     initialize: function () { }
3 });

extend 첫 번 째 매개 변 수 는 하나의 대상 입 니 다. 그 는 모델 인 스 턴 스 의 속성 이 되 었 습 니 다. 두 번 째 매개 변 수 는 선택 할 수 있 는 클래스 속성의 해시 입 니 다. extend 를 여러 번 호출 하면 모델 의 하위 클래스 를 생 성 할 수 있 습 니 다. 그들 은 아버지의 모든 클래스 와 인 스 턴 스 의 속성 을 계승 할 것 입 니 다.

1 var User = Backbone.Model.extend({
2     //    
3     instanceProperty: 'foo'
4 }, {
5     //   
6     classProperty: 'bar'
7 });

모델 이 예화 되 었 을 때 그의 initialize 함 수 는 임의의 인 스 턴 스 파 라 메 터 를 받 아들 일 수 있 습 니 다. 뒤의 작업 원 리 는 Backbone 모델 자체 가 구조 함수 이기 때문에 new 를 사용 하여 새로운 인 스 턴 스 를 생 성 할 수 있 습 니 다.

1 var User = Backbone.Model.extend({
2     initialize: function (name) {
3         this.set({name, name});
4     }
5 });
6 var user = new User('   ');

PS: 너희들 이 알 고 있 는 지 모 르 는 지 에 대해 서 나 는 어차피 모 르 니까 계속 공부 해. 멘 붕................................................
모델 과 속성
set () 와 get () 함 수 를 사용 하여 인 스 턴 스 의 속성 을 설정 하고 가 져 옵 니 다:

user.set({name: '   '});

vaidate 함수 로 속성 을 검증 할 수 있 습 니 다:

 1 var User = Backbone.Model.extend({
 2     validate: function (atts) {
 3         if(!atts.email || atts.email.length < 3) {
 4             return 'email error';
 5         }
 6     }
 7 });
 8 var user = new User();
 9 user.bind('error', function (model, error) {
10 //    
11 });
12 //      
13 user.set({email: 'ss'});

결어
이 건 좀 어려워 요. 우 리 는 오늘 잠시 여기에 와 서 개인 적 으로 연구 한 다음 에 쓸 게 요.................................................