> 웹 프론트엔드 > JS 튜토리얼 > javaScript——mvvm과 mvc 디자인 패턴의 차이점은 무엇입니까?

javaScript——mvvm과 mvc 디자인 패턴의 차이점은 무엇입니까?

php是最好的语言
풀어 주다: 2018-07-24 16:36:28
원래의
3270명이 탐색했습니다.

MVC에서 View가 Model에 직접 액세스할 수 있는 MVVM 및 MVC 디자인 패턴이 무엇인지 간략하게 살펴보겠습니다. 따라서 뷰에는 모델 정보와 필연적으로 일부 비즈니스 로직이 포함됩니다.

1. MVVM과 MVC의 차이점은 무엇인가요?

MVC에서는 View가 Model에 직접 접근할 수 있습니다! 따라서 뷰에는 모델 정보와 필연적으로 일부 비즈니스 로직이 포함됩니다. MVC 모델은 모델의 불변성에 중점을 둡니다. 따라서 MVC 모델에서 모델은 뷰에 의존하지 않지만 뷰는 모델에 의존합니다. 뿐만 아니라 일부 비즈니스 로직은 View에서 구현되기 때문에 View를 변경하는 것도 어렵습니다. 최소한 MVC의 모든 통신은 단방향입니다. 개념적으로 MVVM은 페이지와 데이터 로직을 완전히 분리하고 양방향 데이터 바인딩을 달성할 수 있는 패턴입니다.

2.VM이란? ㅋㅋㅋ  ' ' s '를 VM으로   VM으로   으로   으로 ‐ ‐ ‐ ‐ vm은 View에서 추상화된 데이터 모델이 됩니다. 개발 중에 VM은 더 이상 쓰지 않는다는 점에 유의해야 합니다. 일부 방법 등과 같이 데이터와 관련되지 않은 다른 것.

3. MVVM과 코드는 어떻게 일치하나요?

MVVM은 모델, 뷰, VM의 세 부분으로 구성됩니다. 모델은 데이터를 획득하고 이를 VM에서 사용할 수 있는 것으로 처리하는 논리적 부분에 해당하고, 뷰는 데이터 표시 및 데이터 바인딩 부분에 해당하며, VM은 추상적인 데이터 모델 개체입니다.

4. MVVM 모델을 사용하는 프레임워크는 무엇인가요?

AngularJS, avalon, emberjs, knockoutjs, winjs, React, riverts, way, vue, Regular, drop 및 기타 프레임워크

5 MVC, MVP 등 MVVM 패턴을 사용하는 프런트엔드 프레임워크가 많이 있습니다. , MVVM 사용 시나리오?

사용 시나리오를 이해하려면 먼저 장점과 단점을 이해해야 합니다.

MVC의 장점과 단점:

장점:

1. 높은 수준의 모듈성을 갖춘 컨트롤러로 모든 비즈니스 로직을 분리합니다. 비즈니스 로직이 변경되면 View와 Model을 변경할 필요가 없으며 Controller를 다른 Controller(Swappable Controller)로 변경하면 됩니다.

2. 관찰자 모드는 동시에 여러 보기를 업데이트할 수 있습니다.

단점:

1. 컨트롤러 테스트가 어렵습니다. 왜냐하면 View 동기화 작업은 View 자체에서 수행되고, View는 UI가 있는 환경에서만 실행될 수 있기 때문입니다. UI 환경 없이 컨트롤러를 단위 테스트하는 경우 컨트롤러 비즈니스 로직의 정확성을 확인할 수 없습니다. 컨트롤러가 모델을 업데이트할 때 뷰의 업데이트 작업을 주장할 수 없습니다.

2. 뷰는 구성요소화할 수 없습니다. View는 특정 모델에 크게 의존합니다. 이 View를 다른 애플리케이션의 재사용 가능한 구성 요소로 추출해야 하는 경우에는 어렵습니다. 프로그램마다 도메인 모델이 다르기 때문에

MVP의 장점과 단점:

장점:

1. 테스트가 쉽습니다. Presenter는 단위 테스트가 UI 환경에 의존하지 않는 경우 인터페이스를 통해 View와 통신합니다. View 인터페이스만 구현하면 되는 View 객체를 모의할 수 있습니다. 그런 다음 종속성이 Presenter에 주입되고 단위 테스트 중에 Presenter 비즈니스 로직의 정확성이 완전히 테스트될 수 있습니다.

2. 뷰를 컴포넌트화할 수 있습니다. MVP에서 View는 모델에 의존하지 않습니다. 이를 통해 View는 특정 비즈니스 시나리오와 분리될 수 있습니다. View는 비즈니스 로직을 전혀 무시할 수 있습니다. 상위 계층 작업을 위한 일련의 인터페이스만 제공하면 됩니다. 이러한 방식으로 재사용 가능성이 높은 View 구성 요소를 만들 수 있습니다.

단점:

1. 비즈니스 로직 외에도 Presenter에는 View->Model 및 Model->View에 대한 많은 양의 수동 동기화 로직이 있어 Presenter를 번거롭고 유지 관리하기 어렵게 만듭니다.

MVVM의 장점과 단점:

장점:

1. 유지 관리성이 향상됩니다. 이는 MVP의 수동 뷰 및 모델 동기화 문제를 해결하고 양방향 바인딩 메커니즘을 제공합니다. 코드 유지 관리가 향상되었습니다.

2. 테스트를 단순화합니다. 동기화 로직은 Binder에서 처리하기 때문에 View는 Model과 동시에 변경되므로 Model의 정확성만 확인하면 View가 정확합니다. View 동기화 업데이트 테스트가 대폭 감소되었습니다.

단점: 1. 지나치게 단순한 그래픽 인터페이스는 적합하지 않거나 과도합니다.

2. 대규모 그래픽 애플리케이션의 경우 뷰 상태가 많아 ViewModel 구축 및 유지 관리 비용이 상대적으로 높습니다.

3. 데이터 바인딩 선언은 뷰 템플릿에 명령적으로 작성되며 이러한 내용은 중단되거나 디버깅될 수 없습니다.

위의 장단점에서 알 수 있듯이 MVC->MVP->MVVM으로 가는 것은 마치 몬스터를 물리치고 업그레이드하는 과정과 같습니다. 후자는 전자가 남긴 문제를 해결하고 전자의 단점을 장점으로 최적화하며 실제 프로젝트에 따라 가장 적합한 프레임워크를 선택합니다.

6. Angular, Avalon 및 Vue 중에서 선택하는 방법은 무엇입니까?

Angular에는 MV*의 모든 부분이 포함되어 있으며 자체 규칙 세트가 있으므로 PC에 적합하지만 코드 구조가 더 명확해집니다. Avalon은 가볍고 이전 브라우저에 대한 지원 수준이 높습니다. IE6이므로 Lao Liu 브라우저와 호환되는 프로젝트에 적합합니다. Vue는 주로 가볍고 MV*의 보기 부분으로만 사용됩니다. 가볍고, 배우기 쉽고, 사용하기 쉽다는 장점이 있습니다. 대규모 프로젝트에서는 다른 프로젝트와 협력해야 하기 때문에 프레임워크나 라이브러리를 사용하는 것이 더 번거롭습니다.

7. 개발의 유래.

MVVM(Model-View-ViewModel)框架的由来便是MVP(Model-View-Presenter)模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去,以应对客户日益复杂的需求变化。
로그인 후 복사

8. 양방향 데이터 바인딩을 구현하는 방법.

현재 양방향 데이터 바인딩을 구현하는 세 가지 주요 방법이 있습니다.

1. 수동 바인딩

이전 구현 방법은 관찰자 프로그래밍 모드를 사용합니다. 주요 아이디어는 데이터 개체에 대한 get 및 set 메서드를 정의하는 것입니다. 호출 시 데이터 가져오기 또는 설정을 수동으로 호출하고 데이터 변경 후 UI 레이어의 렌더링 작업을 트리거합니다. 뷰가 데이터 변경을 구동하는 장면은 주로 입력, 선택, 텍스트 영역 등과 같은 요소에 적용됩니다. UI 레이어가 변경되면 dom, keypress, keyup 및 기타 이벤트의 변경을 모니터링하여 데이터 레이어의 데이터를 변경하는 이벤트를 트리거합니다. 전체 프로세스는 함수 호출을 통해 완료됩니다.

2. 더티 감지 메커니즘

일반적인 mvvm 프레임워크인 anglejs로 대표되는 각도는 더티 데이터를 확인하여 UI 레이어 작업을 업데이트합니다. Angular의 더티 감지에 대해 알아야 할 몇 가지 사항이 있습니다.

  • 더티 감지 메커니즘은 예약된 감지를 사용하지 않습니다.

  • 더티 감지 시점은 데이터가 변경되는 시점입니다.

  • Angular는 일반적으로 사용되는 DOM 이벤트, XHR 이벤트 등을 캡슐화하고 Angular에 들어가는 다이제스트 프로세스를 트리거합니다.

  • 다이제스트 프로세스에서는 루트스코프에서 탐색하여 모든 감시자를 확인합니다. (Angular의 특정 디자인에 대해서는 다른 문서를 볼 수 있습니다. 여기서는 데이터 바인딩만 논의합니다.) 그런 다음 더티 감지를 수행하는 방법을 살펴보겠습니다. 주로 설정된 데이터를 통해 데이터와 관련된 모든 요소를 ​​찾은 다음 비교합니다. 데이터가 변경되고, 변경되면 명령 연산이 수행됩니다.

3. 프런트 엔드 데이터 하이재킹(Hijacking)

기본 아이디어는 Object.defineProperty를 사용하여 데이터 객체의 속성 가져오기 및 설정을 모니터링하는 것입니다. 데이터 읽기 및 할당 작업이 있을 때 노드 지침은 다음과 같습니다. 이것이 가장 효율적인 사용 방법입니다. 일반적인 = 등호 할당이면 충분합니다.

9. MVC-MVVM 변환.

소프트웨어의 핵심은 데이터입니다. 데이터의 생성, 수정 및 기타 변경을 중심으로 비즈니스 로직이 나타납니다. 데이터 표시를 중심으로 다양한 인터페이스 기술이 등장했습니다. 잘 설계된 코드가 없으면 데이터 계층(지속성 계층), 비즈니스 논리 계층 및 인터페이스 코드가 결합되는 경우가 많습니다.

mvc는 뷰와 모델의 완전한 분리를 달성하지 못하지만 mvvm은 이를 달성하므로 이로 인해 mvc에서 mvvm으로 전환됩니다.

10. MVVM은 어떤 디자인 패턴을 사용하나요?

관찰자 모드.

관련 권장 사항:

동영상: JavaScript 동영상 튜토리얼

동영상: WeChat 미니 프로그램 초등 개발 동영상 튜토리얼

위 내용은 javaScript——mvvm과 mvc 디자인 패턴의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿