프런트엔드 프레임워크 관리

이번에는 프론트엔드 프레임워크 관리에 대한 주의사항을 소개합니다. 실제 사례를 살펴보겠습니다.

현재 가장 인기 있는 세 가지 프런트엔드 프레임워크는 Angular2+, Vue 및 React입니다. 이들 모두는 프런트엔드 개발을 더욱 표준화하기 위해 구성 요소화 및 모듈화 아이디어를 사용합니다. 하지만 단점도 분명합니다. 불완전한 문서화, 사례 부족, 높은 학습 비용 외에도 구성 요소 간의 상태 관리도 큰 문제입니다. 컴포넌트화는 좋은 일이지만, 컴포넌트 간의 데이터 흐름이 제대로 처리되지 않으면 프로젝트 혼란, 유지보수 어려움 등 부정적인 영향을 미치게 됩니다.

먼저 상태 관리가 필요한 이유에 대해 이야기해 보겠습니다.

예를 들어 두 목록이 동일한 데이터 소스를 참조합니다. 사용자가 목록 중 하나를 변경하면 다른 목록의 데이터도 그에 따라 변경됩니다. angle1을 사용할 때의 해결책은 매우 간단합니다. $rootScope를 사용하면 됩니다. 하지만 세 가지 주요 프레임워크에는 $rootScope라는 개념이 없습니다. 데이터를 동기식으로 업데이트하려면 어떻게 해야 합니까?

어떤 사람들은 이것이 간단하다고 말할 수도 있습니다. 사용자가 첫 번째 테이블을 변경하면 두 번째 테이블에 메시지를 보내고 해당 데이터가 변경되도록 합니다. 하지만 테이블이 10개, 20개라면 어떨까요? 공지를 하나씩 해주시나요? 다른 구성요소도 이 데이터 소스를 사용하는 경우 업데이트 알림을 받게 됩니까?

그래서 이 솔루션은 프로젝트가 단순할 때 가능할 수도 있지만, 프로젝트가 복잡해지면 문제가 즉시 노출됩니다. 앞으로의 프로젝트가 뒤집히는 것을 방지하기 위해서는 그래도 처음부터 생각해야 합니다.

상태 관리의 개념은 복잡한 데이터 흐름을 처리하는 것입니다.

세 가지 주요 프레임워크에서 상태 관리를 구현하는 방법은 다음과 같습니다.

Vue: Vuex

React: Redux(dva.js)

Angular2+: Redux(ngrx)

세 가지 주요 프레임워크는 서로 다른 방식으로 상태 관리를 구현합니다. 방법, 기본 아이디어는 동일합니다. 대략적으로 이야기하자면, 상태 관리를 달성하기 위해

프로젝트는 리듀서, 효과, 서비스 및 모델과 같은 몇 가지 새로운 모듈을

추가했습니다. Angle2+라면

action도 있습니다. 먼저 다음 모듈의 기능에 대해 이야기해 보겠습니다.

models: 데이터 모델. 데이터 자체와 데이터 수정 방법을 저장합니다. Angle2+에서 모델은 엔터티를 저장합니다. 백엔드를 공부해본 사람이라면 익숙할 것이다. 데이터에 관한 진술입니다.

reducers: 동기화 작업을 담당합니다. 예를 들어, 요청된 양식 데이터가 데이터 모델에 저장되고, 사용자가 특정 데이터를 추가/삭제하고, 원본 데이터가 수정됩니다.

서비스: 일반적으로 데이터 획득 방법을 포함하여 데이터 요청 작업을 캡슐화합니다. getList(), getUsers() 등이 있습니다.

효과: 비동기 작업을 담당합니다. 예를 들어 사용자의 요청 작업을 받은 후 서비스를 호출하여 서버에 데이터를 요청합니다. 성공하면 리듀서를 호출하여 데이터를 저장합니다.

Angular2+는 또한 다양한 액션을 캡슐화하는 액션 레이어를 추상화합니다. 예를 들어 데이터가 로드되었습니다. 데이터가 성공적으로 로드되었습니다. 사용자가 데이터를 삭제했습니다. 데이터 유형 및 페이로드(데이터를 수정하는 데 사용되는 데이터)가 포함됩니다.

사용자 작업, 예를 들어

검색

해당 제품을 사용자가 확인 버튼을 누르면 전체 프로세스는 다음과 같이 요약됩니다.

사용자 문제 명령은 리듀서를 호출하여 상태를 수정하고 해당 구성 요소는 로딩 상태에 진입합니다. -> 데이터를 얻기 위해 서비스를 호출합니다. -> 데이터가 성공적으로 획득되고 데이터를 저장하고 로딩이 종료됩니다. ; view

로 렌더링됩니다.

데이터를 업데이트하기 위해 리듀서가 호출되면 모델에 바인딩된 모든 뷰가 동기식으로 업데이트되고 각 처리 논리가 매우 명확해집니다. 프로젝트 복잡성이 증가하더라도 유지 관리가 훨씬 더 편리해질 것입니다.

이해하기 어렵다면 다음 두 가지 경우부터 시작해 보세요.

vuex 카운터 + 목록 표시: http://www.cnblogs.com/axel10/p/8536688.html

dva.js 카운터 + 목록 표시 ：http://www.cnblogs.com/axel10/p/8503782.html

시작하기에 가장 적합한 것은 Vue, 그다음 React(dva.js 사용)이고, 가장 어려운 것은 angle2+입니다. Angular2+에는 Rxjs 및 TypeScript가 포함되며 많은 지식 포인트가 있습니다. 어렵든 아니든 항상 얕은 곳에서 깊은 곳으로 시작해야 한다는 것을 기억하고, 한 걸음에 하늘에 닿을 생각을 하지 마십시오. Angular1에 익숙하지 않다면 먼저 Angular1을 잘 사용하고 MVC 아이디어를 잘 이해한 다음 세 가지 주요 프레임워크에 참여해 보세요. 그렇지 않으면 두 배의 노력으로 절반의 결과를 얻고 많은 낭비를 하게 될 것입니다. 시간.

프론트엔드 엔지니어라면 가능하다면 프론트엔드 프레임워크를 이해하는 데 큰 도움이 될 Java, C# 등의 백엔드 언어를 배우는 것이 좋습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

React의 클래스 정의 구성 요소는 무엇입니까

Vue.js 양식 입력 바인딩

위 내용은 프런트엔드 프레임워크 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!