바닐라 자바 ​​스크립트의 MVC 디자인 패턴

코어 포인트

MVC (Model-View-Controller) 설계 패턴은 우려 사항을 명확하게 분리하여 유지 관리 및 가독성을 향상시키기 위해 JavaScript 코드를 구성하는 강력한 방법입니다.

특정 구현을 부과 할 수있는 프레임 워크와 달리 MVC 패턴은 개발자가 응용 프로그램을보다 쉽게 ​​적응하고 확장 할 수있는 유연한 구조를 제공합니다.

펭귄의 데모를 사용하면 사용자 상호 작용, 데이터 관리 및 UI 업데이트를 체계적으로 처리하기 위해 기본 JavaScript에서 MVC를 적용하는 방법을 보여줍니다.
• MVC 패턴의 지속성과 적응성은 엄격하고 확장 가능한 방식으로 프로그래밍 기술을 연마하려는 개발자에게 귀중한 자산이됩니다.
MVC 패턴의 주요 구성 요소에는 데이터 관리 모델, 처리보기 및 사용자 입력 및 애플리케이션 출력 조정을위한 컨트롤러가 각각 다른 책임을지고 잘 구성되어 있습니다.
• 이 기사는 클린 코드의 중요성과 프레임 워크와의 종속성 잠금을 피하고 응용 프로그램이 개발함에 따라 응용 프로그램이 성장하고 발전함에 따라 코드의 관리 가능성과 확장 성을 유지하기위한 전략으로 MVC를 사용하는 것을 옹호합니다.
디자인 패턴은 종종 인기있는 프레임 워크에 통합됩니다. 예를 들어, MVC (Model-View-Controller) 설계 패턴은 어디에나 있습니다. JavaScript에서는 프레임 워크를 설계 패턴과 분리하기가 어렵습니다. 종종 특정 프레임 워크에는이 설계 패턴에 대한 자체 해석이 제공됩니다. 프레임은 관점과 함께 제공되며 각 프레임은 어떤 식 으로든 생각하게합니다.
• 최신 프레임 워크는 MVC 모델의 특정 구현 방법을 결정합니다. 모든 설명이 다르면 혼란스러워 소음과 혼란이 추가 될 수 있습니다. 실망스러운 혼란은 코드 기반이 여러 프레임 워크를 채택 할 때 발생합니다. 내 마음 속의 문제는 더 좋은 방법이 있습니까?
MVC 패턴은 클라이언트 프레임 워크에 적합하지만 현대 프레임 워크는 변경됩니다. 오늘날의 현대화는 시간이 지남에 따라 죽을 것입니다. 이 경우, 나는 대안을 탐구하고 약간의 훈련이 우리를 데려 갈 수있는 곳을보고 싶습니다.
• 현대 자바 스크립트를 읽고 끊임없이 변화하는 JavaScript 세계를 나란히하십시오! 이 책을 읽으십시오 MVC 모델 자체는 수십 년 전에 추적 될 수 있습니다. 이것은 프로그래밍 기술에 대한 투자 가치가있는 디자인 패턴입니다. MVC 모드는 독립적으로 존재할 수있는 모드입니다. 문제는 이것이 우리를 얼마나 멀리 데려 갈 수 있습니까?
잠깐만, 이것이 또 다른 프레임 워크입니까?
• 우선, 나는이 일반적인 오해를 제거하고 싶습니다. 설계 패턴은 프레임 워크가 아닙니다. 설계 패턴은 코드 문제를 해결하는 엄격한 방법입니다. 이를 위해서는 특정 기술 수준이 필요하며 프로그래머에게 책임을집니다. 디자인 패턴은 분리 된 관심사와 깨끗한 코드 작성을 용이하게합니다.
프레임은 디자인 패턴을 따를 필요가 없기 때문에 다릅니다. 프레임 워크와 패턴을 구별하는 한 가지 방법은 할리우드 원칙을 찾는 것입니다. 할리우드 원칙은 다음과 같습니다. "우리에게 전화하지 마십시오. 언제든지 당신이 그것을 사용할 때의 종속성이 있으며, 그것은 프레임 워크입니다. 프레임 워크는 할리우드와 매우 유사하며 무엇을 해야하는지 또는 어떻게 해야하는지 결정할 수 없습니다. 실제로 개발자는 행동을 요청할 때 스크립트를 따르는 배우와 같습니다.

클라이언트 프레임 워크를 피하는 데 많은 이유가 있습니다.

프레임 워크는 솔루션에 복잡성과 위험을 추가합니다 당신은 종속성 잠금을 발견하여 코드를 유지하기 어렵게 만듭니다. . 새로운 인기있는 프레임 워크의 출현으로 기존 레거시 코드를 다시 작성하는 것은 어렵습니다

MVC 모드

MVC 디자인 패턴은 1970 년대와 1980 년대의 Xerox Smalltalk Research Project에서 시작되었습니다. 이것은 프론트 엔드 그래픽 사용자 인터페이스의 시간 테스트 모드입니다. 이 패턴은 데스크탑 응용 프로그램에서 나오지만 웹 응용 프로그램에도 잘 작동하는 것으로 입증되었습니다.
의 핵심은 MVC 설계 패턴이 우려의 명확한 분리에 관한 것입니다. 목적은 솔루션을 명확하고 이해할 수 있도록하는 것입니다. 특정 변경을 원하는 프로그래머는 올바른 장소를 쉽게 찾을 수 있습니다.
• 펭귄 데모 펭귄! 귀엽고 모피, 지구상에서 가장 귀여운 생물 중 하나. 사실, 그들은 17 개의 다른 펭귄과 함께 매우 귀엽습니다. 모두 남극 대륙의 환경에 사는 것은 아닙니다.
• 이제 펭귄 데모를 만들 시간입니다! 페이지에 여러 종을 보여주는 데크를 보여 드리겠습니다. 이를 위해 MVC 디자인 패턴과 약간의 징계를 사용하고 싶습니다. Extreme Programming 방법을 사용하여 단위 테스트와 간단한 방법을 사용하여 문제를 해결합니다. 마지막으로, 자체 데이터 및 프로필 사진을 갖춘 여러 펭귄을 탐색 할 수 있어야합니다.
이 예가 끝날 무렵, 순수한 JavaScript에서 MVC 디자인 패턴을 사용하기에 충분히 배웠어야합니다. 패턴 자체는 테스트하기가 매우 쉽기 때문에 좋은 단위 테스트가 예상됩니다.
• 크로스 브라우저 호환성 이유에 대해이 데모에서 ES5를 고수 할 것입니다. 이 영구 설계 패턴과 결합 된 입증 된 언어 기능을 사용하는 것이 합리적입니다.
> 준비가 되셨습니까? 기다렸다가 보자.
골격

데모는 컨트롤러, 뷰 및 모델의 세 가지 주요 부분으로 구성됩니다. 각 섹션에는 고유 한 문제와 해결해야 할 문제가 있습니다.

다음은 외관을 시각화 한 것입니다 :
PenguinController는 이벤트를 처리하며보기와 모델 사이의 중개자입니다. 사용자가 작업을 수행 할 때 발생하는 일을 계산합니다 (예 : 버튼을 클릭하거나 키를 누릅니다). 클라이언트 별 논리를 컨트롤러에 배치 할 수 있습니다. 해야 할 일이 많은 더 큰 시스템에서는 모듈로 분류 할 수 있습니다. 컨트롤러는 이벤트의 진입 점이며 뷰와 데이터 사이의 유일한 중재자입니다.

Penguinview는 Dom에 관심이 있습니다. DOM은 HTML 작업을 수행하는 데 사용하는 브라우저 API입니다. MVC에서는보기를 제외하고

변경 Dom의 일부는 없습니다. 보기는 사용자 이벤트를 첨부 할 수 있지만 이벤트 처리 문제를 컨트롤러에 맡깁니다. 보기의 주요 명령은 사용자가 화면에서 보는 상태를 변경하는 것입니다. 이 데모를 위해 View는 DOM 운영에 순수한 JavaScript를 사용합니다. PenguinModel은 데이터에 관심이 있습니다. 클라이언트 JavaScript에서는 Ajax를 의미합니다. MVC 패턴의 장점 중 하나는 이제 서버 측 AJAX 호출을위한 단일 위치가 있다는 것입니다. 이를 통해 솔루션에 익숙하지 않은 다른 프로그래머가 시작하기가 더 쉬워집니다. 이 설계 패턴의 모델은 서버의 JSON 또는 객체에만 관심이 있습니다. 반포 반대 방지는 이러한 고유 한 우려 분리에 위배됩니다. 예를 들어, 모델은 HTML에 신경 쓰지 않아야합니다. 조회수는 Ajax를 신경 쓰지 않아야합니다. 컨트롤러는 구현 세부 사항에 대해 걱정하지 않고 중재자 역할을해야합니다.

나는이 패턴을 사용할 때 개발자가 처음에는 좋은 의도를 가지고 있지만 우려를 유출한다는 것을 알았습니다. 모든 것을 웹 구성 요소로 바꾸고 혼란에 빠지고 싶은 유혹이 있습니다. 기능 및 사용자 지향 문제에 중점을 둡니다. 그러나 기능적 문제는 기능적 문제와 다릅니다.

프로그래밍에서 내가 좋아하는 것은 기능적 문제를 명확하게 분리하는 것입니다. 각 개별 프로그래밍 문제는 일관되게 해결됩니다. 이를 통해 코드를 읽을 때 이해하기 쉽습니다. 목적은 이해하기 쉬운 코드를 작성하여 다른 사람들이 긍정적 인 기여를 할 수 있도록하는 것입니다.

당신이보고 만질 수 있다는 실제 예제 없이는 좋은 데모가 아닙니다. 말할 것도없이, 여기 펭귄의 시연을 보여주는 코드 펜이 있습니다. witepoint보기 (@SitePoint) Codepen에서 펭귄의 데모를 펜.

나는 충분히 말했는데, 이제 코드를 작성할 시간입니다.

컨트롤러 뷰와 모델은 컨트롤러에서 사용하는 두 가지 구성 요소입니다. 컨트롤러에는 생성자에서 작업을 수행하는 데 필요한 모든 구성 요소가 포함되어 있습니다.

생성자는 제어 역전을 사용하고 이러한 방식으로 모듈을 주입합니다. 이 모드를 사용하면 고급 계약을 만족시키는 구성 요소를 주입 할 수 있습니다. 코드를 추상화하고 세부 사항을 구현하는 좋은 방법으로 생각하십시오. 이 패턴을 사용하면 순수한 JavaScript로 깨끗한 코드를 작성할 수 있습니다.

사용자 이벤트는 이런 방식으로 연결되어 처리됩니다.

이 이벤트는 현재 대상을 사용하여 DOM에 저장된 상태를 얻습니다. 이 경우 DOM은 현재 상태에 대해 모두 알려줍니다. DOM의 현재 상태는 사용자가 브라우저에서 보는 것입니다. 컨트롤러가 상태를 변경하지 않는 한 상태 데이터를 DOM 자체에 저장할 수 있습니다.

이벤트가 트리거 된 후 컨트롤러는 데이터를 가져 와서 다음에 어떤 일이 일어날 지 설명합니다. this.showpenguin () 콜백은 흥미 롭습니다

컨트롤러는 각 펭귄의 인덱스를 계산하고 렌더링을 렌더링합니다. 모델의 데이터를 가져 와서보기가 이해하고 관심을 갖는 객체로 변환합니다.

다음은 펭귄 일 때 행복한 길을 보여주는 단위 테스트입니다.

<code>var PenguinController = function PenguinController(penguinView, penguinModel) {
  this.penguinView = penguinView;
  this.penguinModel = penguinModel;
};
</code>

PenguinViewMock은 실제 구현과 동일한 계약을합니다. 이를 통해 단위 테스트를 작성하고 주장을 할 수 있습니다. 주장은 노드 어설 션에서 나오고 차이 주장에도 존재합니다. 이를 통해 노드와 브라우저에서 실행할 수있는 테스트를 작성할 수 있습니다.

컨트롤러는 구현 세부 사항에 신경 쓰지 않습니다. this.render ()와 같은 View에서 제공하는 계약을 사용합니다. 그것이 깨끗한 코드를 작성하는 데 필요한 규율입니다. 컨트롤러는 모든 구성 요소가 말하는 것을 수행 할 수 있다고 신뢰할 수 있습니다. 이로 인해 투명성이 높아지고 코드를 쉽게 읽을 수 있습니다.

view 보기는 DOM 요소 및 연결 이벤트에만 관심이 있습니다.

사용자가 보이는 상태를 변경하면 구현은 다음과 같습니다.

주요 관심사는보기 모델 데이터를 HTML로 변환하고 상태를 변경하는 것입니다. 두 번째는 클릭 이벤트를 연결하고 컨트롤러가 진입 점으로 작용하도록하는 것입니다. 상태 변경 후 이벤트 핸들러가 DOM에 연결됩니다. 이 기술은 한 번에 이벤트 관리를 처리합니다.

이를 테스트하기 위해 요소가 업데이트되어 상태를 변경했는지 확인할 수 있습니다.

이것은 모든 주요 문제, 상태 변경 및 연결 이벤트를 해결합니다. 그러나 데이터는 어디에서 왔습니까?

<code>PenguinController.prototype.initialize = function initialize() {
  this.penguinView.onClickGetPenguin = this.onClickGetPenguin.bind(this);
};

PenguinController.prototype.onClickGetPenguin = function onClickGetPenguin(e) {
  var target = e.currentTarget;
  var index = parseInt(target.dataset.penguinIndex, 10);

  this.penguinModel.getPenguin(index, this.showPenguin.bind(this));
};
</code>

모델 MVC에서 모든 모델은 Ajax를 관리합니다. 예를 들면 :
모듈 xmlhttprequest는 생성자에 주입됩니다. 이것은 다른 프로그래머 에게이 모델이 필요한 구성 요소를 알리는 방법입니다. 모델에 간단한 Ajax가 필요한 경우 더 많은 모듈을 사용하여이를 나타낼 수 있습니다. 또한 단위 테스트를 사용하면 원래 모듈과 정확히 동일한 계약을 가진 모의를 주입 할 수 있습니다.

<code>PenguinController.prototype.showPenguin = function showPenguin(penguinModelData) {
  var penguinViewModel = {
    name: penguinModelData.name,
    imageUrl: penguinModelData.imageUrl,
    size: penguinModelData.size,
    favoriteFood: penguinModelData.favoriteFood
  };

  penguinViewModel.previousIndex = penguinModelData.index - 1;
  penguinViewModel.nextIndex = penguinModelData.index + 1;

  if (penguinModelData.index === 0) {
    penguinViewModel.previousIndex = penguinModelData.count - 1;
  }

  if (penguinModelData.index === penguinModelData.count - 1) {
    penguinViewModel.nextIndex = 0;
  }

  this.penguinView.render(penguinViewModel);
};
</code>

지수를 기반으로 펭귄을 가져올 시간입니다 :

이것은 엔드 포인트를 가리키고 서버에서 데이터를 가져옵니다. 단위 테스트로 데이터를 조롱하여 이것을 테스트 할 수 있습니다.

보시다시피, 모델은 원래 데이터에 대해서만 관심이 있습니다. 이것은 Ajax 및 JavaScript 객체를 사용하는 것을 의미합니다. 순수한 JavaScript에서 Ajax를 모르는 경우 더 많은 정보가 포함 된 기사가 있습니다.
단위 테스트 모든 징계의 경우 보장 된 작업을 얻는 것이 중요합니다. MVC 설계 패턴은 문제를 해결하는 방법을 규정하지 않습니다. 설계 패턴은 깨끗한 코드를 작성할 수있는 광범위한 경계 세트를 제공합니다. 이것은 당신을 의존하지 못하게합니다.

<code>var PenguinViewMock = function PenguinViewMock() {
  this.calledRenderWith = null;
};

PenguinViewMock.prototype.render = function render(penguinViewModel) {
  this.calledRenderWith = penguinViewModel;
};

// Arrange
var penguinViewMock = new PenguinViewMock();

var controller = new PenguinController(penguinViewMock, null);

var penguinModelData = {
  name: 'Chinstrap',
  imageUrl: 'http://chinstrapl.jpg',
  size: '5.0kg (m), 4.8kg (f)',
  favoriteFood: 'krill',
  index: 2,
  count: 5
};

// Act
controller.showPenguin(penguinModelData);

// Assert
assert.strictEqual(penguinViewMock.calledRenderWith.name, 'Chinstrap');
assert.strictEqual(penguinViewMock.calledRenderWith.imageUrl, 'http://chinstrapl.jpg');
assert.strictEqual(penguinViewMock.calledRenderWith.size, '5.0kg (m), 4.8kg (f)');
assert.strictEqual(penguinViewMock.calledRenderWith.favoriteFood, 'krill');
assert.strictEqual(penguinViewMock.calledRenderWith.previousIndex, 1);
assert.strictEqual(penguinViewMock.calledRenderWith.nextIndex, 3);
</code>

저에게있어, 이것은 각 사용 사례에 대한 전체 단위 테스트 세트를 제공하는 것을 의미합니다. 테스트는 코드의 유용한 방법에 대한 지침을 제공합니다. 이로 인해 특정 변경을 원하는 프로그래머에게 개방적이고 유혹을받습니다.

전체 단위 테스트 세트를 자유롭게보십시오. 이것이이 디자인 패턴을 이해하는 데 도움이 될 것이라고 생각합니다. 각 테스트는 특정 사용 사례를 목표로합니다. 단위 테스트를 통해 각 코딩 문제를 독립적으로 고려하여 해결하는 데 도움이됩니다. MVC에서 기능적 문제의 이러한 분리는 모든 단위 테스트에 반영됩니다.

전진하기

펭귄의 데모에는 MVC가 얼마나 유용한지를 보여주는 기본적인 실현 가능한 개념 만 포함됩니다. 그러나 많은 개선 사항을 반복 할 수 있습니다
펭귄의 모든 목록을 표시하는 화면을 추가하십시오 키보드 이벤트를 추가하여 펭귄을 뒤집을 수 있고 스 와이프 기능을 추가하십시오 SVG 차트 데이터를 시각화하려면 펭귄의 크기와 같은 데이터 포인트를 선택하십시오. 물론 독자 여러분,이 데모를 더욱 향상시킬 수 있습니다. 이것들은이 디자인 패턴의 힘을 보여줄 수있는 몇 가지 아이디어 일뿐입니다.
결론 MVC 디자인 패턴과 약간의 징계가 어디로 갈 수 있는지 알 수 있기를 바랍니다. 좋은 디자인 패턴은 방해받지 않고 깨끗한 코드 작성을 용이하게합니다. 문제를 해결할 때 과제에 집중할 수 있습니다. 그것은 당신을 더 좋고 효율적인 프로그래머로 만들 것입니다.
• 프로그래밍에서 목적은 중복성을 제거하면서 당면한 문제에 밀접하게 집중하는 것입니다. 프로그래밍 기술은 한 번에 하나의 문제를 해결하는 것입니다. MVC에서 이것은 기능적 문제를 한 번에 하나씩 해결하는 것을 의미합니다.
개발자로서, 당신이 논리적이며 감정을 다루지 않는다고 믿기 쉽습니다. 진실은, 한 번에 너무 많은 문제가있을 때 좌절한다는 것입니다. 이것이 우리 모두가 다루어야 할 정상적인 인간 반응입니다. 실제로 좌절은 코드 품질에 부정적인 영향을 줄 수 있습니다. 이 느낌이 당신을 포착하고 당신의 일을 이끌면 더 이상 논리에 관한 것이 아닙니다. 솔루션이 더 많은 위험과 복잡한 의존성을 취하기 때문에 이것은 실망 스러울 수 있습니다.
내가 좋아하는 것은 단일 초점에 초점을 맞추는 것입니다. 한 번에 하나의 문제를 해결하고 긍정적 인 피드백을 받으십시오. 이런 식으로, 당신은 집중하고 효율적이며 의미없는 것들을 피할 수 있습니다.
이 기사는 Vildan Softic이 동료 검토했습니다. itepoint 컨텐츠를 최대한 활용 한 모든 Sitepoint Peer Reviewers에게 감사합니다!

JavaScript MVC 디자인 패턴에 대한 자주 묻는 질문

JavaScript MVC 설계 패턴의 중요성은 무엇입니까?

JavaScript의 MVC (Model-View-Controller) 설계 패턴은 간결하고 체계적인 방식으로 코드를 구성하는 데 도움이되기 때문에 중요합니다. 응용 프로그램의 초점을 세 가지 상호 관련 구성 요소로 나눕니다. 모델은 데이터 및 비즈니스 로직을 처리하고 View는 데이터 표시를 관리하며 컨트롤러는 사용자 입력을 처리합니다. 이 분리를 통해 효율적인 코드 관리, 더 쉬운 디버깅 및 확장 성 개선이 가능합니다.

MVC 패턴은 코드의 가독성과 유지 가능성을 어떻게 개선합니까?

MVC 모드는 책임을 분리하여 코드의 가독성과 유지 가능성을 향상시킵니다. MVC 패턴의 각 구성 요소는 다른 기능을 갖습니다. 이 분리는 개발자가 다른 사람에게 영향을 미치지 않고 개별 구성 요소를 처리 할 수 ​​있음을 의미합니다. 또한 한 구성 요소의 변경이 다른 구성 요소에 영향을 미치지 않기 때문에 오류를 쉽게 찾아서 찾아서 수정, 기능을 업데이트하거나 리팩터 코드를 수정할 수 있습니다.

MVC 패턴에서 모델의 역할을 설명 할 수 있습니까?

MVC 패턴의 모델은 데이터 및 비즈니스 로직 관리를 담당합니다. 데이터베이스에서 데이터를 검색하고 데이터에서 작동하며 데이터를 업데이트합니다. 모델은 사용자 인터페이스와 무관하며보기 또는 컨트롤러와 직접 상호 작용하지 않습니다. 대신 상태가 변경 될 때 알림을 보냅니다.

MVC 모드에서보기의 기능은 무엇입니까?

MVC 모드의 뷰는 사용자에게 데이터를 표시 할 책임이 있습니다. 모델에서 데이터를 수신하고 데이터를 사용자 친화적 인 형식으로 표시합니다. 보기는 모델과 직접 상호 작용하지 않습니다. 대신 컨트롤러로부터 업데이트를받습니다.

컨트롤러는 MVC 모드를 어떻게 촉진합니까?

MVC 모드의 컨트롤러는 모델과 뷰 사이의 중재자 역할을합니다. 사용자 입력을 처리하고 모델을 업데이트하고 그에 따라 뷰를 봅니다. 사용자가보기와 상호 작용하면 컨트롤러는 입력을 해석하고 모델을 변경해야합니다. 또한 이러한 변경 사항을 반영하도록보기를 업데이트합니다.

MVC 모드는 어떻게 확장 성을 향상 시키는가?

MVC 모드는 초점 포인트를 분리하여 확장 성을 향상시킵니다. 이 분리를 통해 개발자는 다른 구성 요소에 영향을 미치지 않고 한 구성 요소를 수정하거나 확장 할 수 있습니다. 예를 들어, 데이터가 표시되는 방식을 변경 해야하는 경우 모델이나 컨트롤러를 터치하지 않고도보기를 수정할 수 있습니다. 이 모듈성을 사용하면 시간이 지남에 따라 응용 프로그램을 쉽게 확장하고 성장시킬 수 있습니다.

MVC 패턴은 다른 JavaScript 프레임 워크와 함께 사용할 수 있습니까?

예, MVC 패턴은 AngularJS, ember.js 및 backbone.js와 같은 다양한 JavaScript 프레임 워크와 함께 사용할 수 있습니다. 이러한 프레임 워크는 MVC 패턴을 구현하는 구조화 된 접근 방식을 제공하여 복잡한 응용 프로그램을보다 쉽게 ​​구축 할 수 있습니다.

JavaScript에서 MVC 패턴을 구현하는 데 어떤 어려움이 있습니까?

JavaScript의 동적 특성으로 인해 JavaScript에서 MVC 패턴을 구현하는 것은 어려울 수 있습니다. 언어를 잘 이해해야하며 모델, 뷰 및 컨트롤러가 올바르게 분리되어 올바르게 상호 작용할 수 있도록 신중한 계획이 필요합니다. 또한 이러한 구성 요소간에 업데이트를 관리하는 것은 복잡 할 수 있습니다.

MVC 모델은 팀 개발을 어떻게 지원합니까?

MVC 모드는 다른 개발자가 다른 구성 요소를 동시에 처리 할 수 ​​있도록함으로써 팀 개발을 지원합니다. 예를 들어, 한 개발자는 모델을 처리 할 수 ​​있으며 다른 개발자는보기를 처리 할 수 ​​있습니다. 이러한 우려의 분리는 생산성을 높일뿐만 아니라 코드 중첩으로 인한 충돌 또는 오류의 가능성을 줄입니다.

MVC 모드를 사용하여 모바일 애플리케이션을 개발할 수 있습니까?

예, MVC 모드를 사용하여 모바일 애플리케이션을 개발할 수 있습니다. 복잡한 모바일 애플리케이션 관리를보다 쉽게 ​​관리 할 수있는 응용 프로그램 개발에 대한 체계적인 접근 방식을 제공합니다. React Native 및 Ionic과 같은 많은 인기있는 모바일 개발 프레임 워크가 MVC 모드를 지원합니다.

위 내용은 바닐라 자바 ​​스크립트의 MVC 디자인 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!