Javascript MVC 프레임워크 Backbone.js_javascript 기술에 대한 자세한 설명

JavaScript 프로그램이 점점 더 복잡해지면서 팀의 협력과 개발이 필요한 경우가 많습니다. 이때 코드의 모듈화 및 구성 사양이 매우 중요해집니다. MVC 패턴은 코드 구성의 고전적인 패턴입니다.

(…MVC 소개.)

(1)모델

모델은 프로그램에서 요구하는 데이터 소스인 데이터 레이어를 나타내며, 일반적으로 JSON 형식으로 표현됩니다.

(2)보기

뷰는 사용자 인터페이스인 프리젠테이션 레이어를 나타냅니다. 웹페이지의 경우 사용자가 보는 웹페이지의 HTML 코드입니다.

(3)컨트롤러

Controller는 원본 데이터(Model)를 처리하여 View로 전송하는 데 사용되는 제어 계층을 나타냅니다.

웹 프로그래밍은 클라이언트 프로그래밍과 다르기 때문에 MVC를 기반으로 JavaScript 커뮤니티에서는 MVP(Model-View-Presenter), MVVM(Model-View-ViewModel) 등 다양한 변형 프레임워크를 제작했습니다. 이러한 유형의 프레임워크 모드를 총칭하여 MV*라고 합니다.

프레임워크의 장점은 코드를 합리적으로 구성하고 팀워크와 향후 유지 관리를 용이하게 한다는 점이지만, 학습 비용이 일정하고 작성 방법에 제한이 있다는 단점이 있습니다.

백본 로딩

코드 복사 코드는 다음과 같습니다.

백본.뷰

기본 사용법

Backbone.View 메소드는 뷰 클래스를 정의하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var AppView = Backbone.View.extend({
렌더링: 함수(){
$('main').append('

1단계 제목

');
}
});

위 코드는 Backbone.View의 확장 메소드를 통해 AppView 뷰 클래스를 정의합니다. 이 클래스 내부에는 웹 페이지에 뷰를 배치하는 데 사용되는 render 메서드가 있습니다.

사용시에는 먼저 뷰 클래스의 새 인스턴스를 생성한 후 해당 인스턴스를 통해 render 메소드를 호출하여 웹페이지에 뷰를 표시해야 합니다.

코드 복사 코드는 다음과 같습니다.

var appView = new AppView();
appView.render();

위 코드는 AppView 뷰 클래스의 새로운 인스턴스 appView를 생성한 후 appView.render를 호출하면 지정된 콘텐츠가 웹 페이지에 표시됩니다.

새 뷰 인스턴스를 생성할 때 일반적으로 모델을 지정해야 합니다.

코드 복사 코드는 다음과 같습니다.

var 문서 = 새 문서({
모델: doc
});

초기화 방법

뷰는 인스턴스가 생성될 때 초기화 메서드를 정의할 수도 있으며, 이 메서드는 인스턴스를 초기화하기 위해 자동으로 호출됩니다.

코드 복사 코드는 다음과 같습니다.

var AppView = Backbone.View.extend({
초기화: 함수(){
This.render();
},
렌더링: 함수(){
$('main').append('

1단계 제목

');
}
});
var appView = new AppView();

위 코드에서 초기화 메소드를 정의한 후, 인스턴스 생성 후 appView.render()를 수동으로 호출하는 단계는 생략됩니다.

el 속성, $el 속성

렌더링 메소드에서 직접 "뷰"에 바인딩된 웹페이지 요소를 지정하는 것 외에도 뷰의 el 속성을 사용하여 웹페이지 요소를 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

var AppView = Backbone.View.extend({
엘: $('main'),
렌더링: 함수(){
This.$el.append('

1단계 제목

');
}
});

위의 코드는 웹페이지 요소를 render 메서드에 직접 바인딩하며 효과는 완전히 동일합니다. 위 코드에는 el 속성 외에 $el 속성도 있습니다. 전자는 지정된 DOM 요소를 나타내고, 후자는 DOM 요소에 해당하는 jQuery 객체를 나타냅니다.

tagName 속성, className 속성

el 속성을 지정하지 않은 경우 tagName 속성, className 속성을 통해서도 지정할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var Document = Backbone.View.extend({
태그 이름: "li",
클래스명: "문서",
렌더링: 함수() {
// ...
}
});

템플릿 방법

뷰의 템플릿 속성은 웹페이지 템플릿을 지정하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var AppView = Backbone.View.extend({
템플릿: _.template("

안녕하세요 <%= who %>

"),
});

위 코드에서 밑줄 함수 라이브러리의 템플릿 함수는 템플릿 문자열을 매개변수로 받아들이고 해당 템플릿 함수를 반환합니다. 이 템플릿 기능을 사용하면 특정 값만 제공하면 웹페이지 코드를 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var AppView = Backbone.View.extend({
      엘: $('#container'),
템플릿: _.template("

안녕하세요 <%= who %>

"),
초기화: 함수(){
This.render();
},
       렌더링: function(){
This.$el.html(this.template({who: 'world!'}));
}
});

위 코드의 렌더링은 템플릿 메소드를 호출하여 특정 웹 페이지 코드를 생성합니다.

실제 애플리케이션에서는 일반적으로 템플릿이 스크립트 태그에 배치되는데, 이는 브라우저가 JavaScript 코드에 따라 파싱하는 것을 방지하기 위해 유형 속성을 text/template으로 설정합니다.

코드 복사 코드는 다음과 같습니다.