> 웹 프론트엔드 > JS 튜토리얼 > 프론트엔드 아키텍처 지식 포인트

프론트엔드 아키텍처 지식 포인트

PHP中文网
풀어 주다: 2017-06-20 09:43:29
원래의
1158명이 탐색했습니다.

이전 말

이 글은 문서 출력, 시스템 분해, 컴포넌트 추출, 릴리스 최적화의 4가지 부분을 포함하여 프런트엔드 아키텍처에서 놓친 지식 포인트를 보완할 것입니다

문서 출력

1. -사람 협업. 몇 가지 질문:

 a. 문서 작성에 대한 작성 요구 사항은 상대적으로 높아야 하며, 구조화되고, 논리적으로 명확하고, 잘 작성되고, 빠르게 작성되어야 하며, 읽을 수 있도록 조판에도 주의를 기울여야 합니다. 기타

 b. 시스템이 더 복잡해지고 문서의 길이도 길어집니다. 전체 기사를 읽는 데 시간이 너무 오래 걸릴 정도로 매우 길어집니다.

 c. 사양은 요구 사항을 충족할 수 있지만 반드시 개발 논리를 따르지는 않습니다.

 d, 요구 사항과 개발자의 읽기를 모두 충족해야 합니다. e. 표현의 모호함, 개인적인 이해의 차이, 내용의 불완전성, 오타 등

2. 후속 작업 및 재사용 측면에서도 문제가 발생합니다.

 a. 사양의 최종 버전과 후속 수정은 계속해서 수정되어야 합니다. 수정으로 인해 후속 직원에게 추가 오버헤드가 발생합니다.

 b. 요구 사항이 변경되면 사양을 재설계해야 하며, 시스템 구조도 필요합니다.

 c. 사양의 재사용성은 개발자의 디자인 수준과 밀접한 관련이 있습니다.

 d 재사용된 문서에는 필연적으로 원본 디자인의 내용이 포함되지 않습니다.

시스템 분해

실제 개발 시 시스템 분해의 어려움과 고려해야 할 문제는 다음과 같습니다.

1. 분해의 주요 어려움은 어떻게 하느냐입니다. 분할하는 것이 합리적인가요?

  2. 모든 비즈니스 기능을 분할할 수 있나요?

3. 분할 모듈을 다시 분할할 수 있나요?

4. 각 모듈은 자체적으로 분할할 수 있나요? 세분화를 모듈 수준으로 나누어야 할까요?

 5. 분해하면 쉽게 과도한 분해나 조기 분해가 발생할 수 있어 비용이 증가하고 위험이 따릅니다.

 6. 분할된 모듈을 재사용할 수 있나요?

7. 분해 후 잘 통합될 수 있나요?

8. 대화형 초안이 100% 분해되고 모듈이 누락되지 않도록 하세요. 약간의 누락이 후속 개발에 영향을 미칩니다.

9. 분해를 완료하는 방법은 다음과 같습니다. 시간 제한이 없으면 전체 진행이 지연됩니다.

구성 요소 추출

상호 작용을 기반으로 공통 구성 요소를 추출하려면 다음 작업을 수행해야 합니다.

1. 상호 작용 초안을 계층으로 나누고 유사한 부분을 추출합니다.

2. 더 작은 구성 요소를 추가로 분할하고 추출합니다.

 3. 각 구성 요소가 상대적으로 독립적이고 다른 구성 요소와 중복되지 않는지 확인합니다.

 4. 제거된 구성 요소는 최대한 간단하고 재사용이 가능합니다. 버튼, 아이콘, 페이징, 탐색, 메뉴, 목록, 캐러셀 등

  6. 이러한 구성 요소를 결합하면 대화형 초안을 복원할 수 있습니다.

릴리스 최적화

프로젝트가 릴리스되면 다음과 같은 최적화가 이루어집니다. 필수

 1. 파일 캐싱. 대역폭을 절약하고 성능을 향상시키기 위해 장기 로컬 캐시를 구성합니다. 콘텐츠 요약을 캐시 업데이트의 기초로 사용하여 정확한 캐시 제어를 달성하는 동시에 리소스의 비커버리지 게시를 실현하여 원활한 업그레이드를 보장합니다

 2. 정적 리소스 CDN 배포 및 최적화 네트워크 요청 응답

 3. 리소스 병합 및 최적화. 파일 병합, 모듈화로 인해 이미지 압축 및 스프라이트 병합(이제 iconfont가 인기 있는 것 같습니다) 등을 포함한 HTTP 이미지 최적화가 크게 증가합니다.

위 내용은 프론트엔드 아키텍처 지식 포인트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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