개발 과정에서 객체 지향 프로그래밍 , 모델-뷰-컨트롤러 (MVC)는 사용자 인터페이스를 기본 데이터 모델에 효율적이고 성공적으로 연결하는 데 도움이되는 방법론 또는 디자인 패턴입니다. 이 기사에서 우리는 다음 순서의 MVC 아키텍처 :
JavaScript MVC 아키텍처
최근 MVC 패턴은 다음과 같은 다양한 프로그래밍 언어에 적용됩니다. . JavaScript는 MVC 아키텍처 또는 변형을 지원하는 여러 프레임 워크로 구성됩니다. 이를 통해 개발자는 많은 노력없이 쉽게 애플리케이션에 구조를 추가 할 수 있습니다.
MVC는 세 가지 구성 요소로 구성됩니다.
- 모델
- 전망
- 제어 장치
이제이 세 가지 JavaScript MVC 구성 요소에 대해 자세히 살펴 보겠습니다.
모델
모델은 애플리케이션의 데이터를 관리하는 데 사용됩니다. 사용자 인터페이스 또는 프레젠테이션 레이어와는 관련이 없습니다. 대신 응용 프로그램에 필요할 수있는 고유 한 데이터 형식을 나타냅니다. 모델이 변경되거나 업데이트되면 일반적으로 관찰자에게 발생한 변경 사항에 대해 알립니다.
Backbone을 사용하여 구현 된 단순한 모델의 예를 살펴 보겠습니다.
오버로딩 vs 오버라이드 C ++
var Photo = Backbone.Model.extend ({// 사진의 기본 속성 기본값 : {src : 'placeholder.jpg', caption : 'A default image', seen : false}, // 생성 된 각 사진에 `src`. initialize : function () {this.set ({ 'src': this.defaults.src})}})사진 갤러리에서 사진의 개념은 고유 한 종류의 도메인 별 데이터를 나타내므로 자체 모델의 장점이 있습니다. 이러한 모델에는 캡션, 이미지 소스 및 추가 메타 데이터와 같은 관련 속성이 포함될 수 있습니다. 위의 예에서 특정 사진은 모델의 인스턴스에 저장됩니다.
견해
보기는 현재 상태에 대한 필터링 된보기를 제공하는 모델의 시각적 표현입니다. JavaScript 뷰는 DOM 요소를 빌드하고 유지하는 데 사용됩니다. 뷰는 일반적으로 모델을 관찰하고 모델이 변경 될 때 알림을 받으므로 그에 따라 뷰가 자체적으로 업데이트 될 수 있습니다. 예를 들면 :
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ( 'div'), photoEl = document.createElement ( 'div') base.appendChild (photoEl) var render = function () {// Underscore와 같은 템플릿 라이브러리 // 사진 항목에 대한 HTML을 생성하는 // 템플릿 photoEl.innerHTML = _.template ( '#photoTemplate', {src : photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ( 'click', function () {photoController.handleEvent ( 'click', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView : show, hideView : hide}}이 아키텍처의 이점은 각 구성 요소가 필요에 따라 응용 프로그램 기능을 수행하는 데있어 별도의 역할을 수행한다는 것입니다.
컨트롤러
컨트롤러는 사용자가 뷰를 조작 할 때 모델을 업데이트하는 역할을하는 모델과 뷰 사이의 중간 역할을합니다. 위의 사진 갤러리 응용 프로그램 예에서 컨트롤러는 사용자가 편집을 마쳤을 때 특정 사진 모델을 업데이트하여 특정 사진에 대한 편집보기에 대한 사용자 변경 사항을 처리 할 책임이 있습니다.
var PhotosController = Spine.Controller.sub ({init : function () {this.item.bind ( 'update', this.proxy (this.render)) this.item.bind ( 'destroy', this.proxy (this .remove))}, render : function () {// 템플릿 처리 this.replace ($ ( '#photoTemplate') .tmpl (this.item)) return this}, remove : function () {this.el.remove () this.release ()}})이 예제는 모델과 뷰 간의 변경을 관리하는 매우 가볍고 간단한 방법을 제공합니다.
JavaScript MVC 프레임 워크
지난 몇 년 동안 일련의 JavaScript MVC 개발되었습니다. 이러한 각 프레임 워크는 개발자가보다 구조화 된 JavaScript 코드를 작성하도록 장려하기 위해 특정 형태의 MVC 패턴을 따릅니다. 일부 프레임 워크는 다음과 같습니다.
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
이것으로 JavaScript MVC 기사의 끝까지 왔습니다. MVC 아키텍처와 관련된 세 가지 구성 요소를 이해 하셨기를 바랍니다.
이제 JavaScript MVC에 대해 알았으니 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
질문이 있으십니까? 'JavaScript MVC'의 주석 섹션에 언급 해 주시면 다시 연락 드리겠습니다.