>웹 프론트엔드 >프런트엔드 Q&A >프론트엔드에 대해 무엇을 배워야 합니까?

프론트엔드에 대해 무엇을 배워야 합니까?

烟雨青岚
烟雨青岚원래의
2020-06-16 17:06:439772검색

프론트엔드에 대해 무엇을 배워야 합니까?

프론트엔드에 대해 무엇을 배워야 할까요?

첫 번째 단계: HTML+CSS+JS 기본

(1) HTML+CSS:

고급 HTML, 고급 CSS, DIV+CSS 레이아웃, HTML+CSS 전체 사이트 개발,

( 2) 자바스크립트 기본 사항:

                                                                                                                                                                                                         JavaScript 기초

(3) JS 기본 특수 효과:

일반적인 특수 효과: 탭, 탐색, 전체 페이지 스크롤, 캐러셀, JS 슬라이드 제작, 팝업 레이어, 아코디언 메뉴, 폭포 흐름 레이아웃, 스크롤 이벤트, 롤링 차이 보다.

(4) JS 고급 기능:

정규식, 정렬 알고리즘, 재귀 알고리즘, 클로저, 함수 조절, 범위 체인, 거리 기반 모션 프레임워크, 객체 지향 기초,

(5) JQuery: 기본 사용법

핸드오버, DOM 조작, 특수 효과 및 애니메이션, 메소드 체인, 드래그 앤 드롭, 변환, JQueryUI 구성 요소의 기본 사용.

2단계: HTML5 및 모바일 웹 개발

(1) HTML5:

HTML5 새로운 의미 체계 태그, HTML5 양식, 오디오 및 비디오, 오프라인 및 로컬 저장소, SVG, 웹 소켓, 캔버스.

(2 ) CSS3:

CSS3 새로운 선택기, 의사 요소, 색상 표현, 테두리, 그림자, 플렉스 레이아웃, 배경 계열 속성 변경, 전환, 애니메이션, 피사계 심도 및 심도 침투, 3D 효과 제작, Velocity.js 프레임워크, 요소 입력, 출구전략과 멋진 CSS3 웹페이지 제작.

(3) 부트스트랩:

반응형 개념, 미디어 쿼리, 반응형 웹사이트 제작, 그리드 삭제 시스템, 그리드 삭제 시스템 원칙, 일반적인 부트스트랩 템플릿, LESS 및 SASS.

(4) 모바일 웹 개발:

크로스 터미널 WEB 및 주류 장치 소개, 뷰포트, 유동 레이아웃, 가변 상자, rem, 모바일 터미널 JavaScript 이벤트, 휴대폰에서 일반적인 JS 효과 생성, 모바일 Juhuasuan 페이지, 휴대폰 스크롤 .

세 번째 단계: HTTP 서비스 및 AJAX 프로그래밍

(1) WEB 서버 기본:

서버 기본, Apache 서버 및 기타 WEB 서버 소개, Apache 서버 구축, HTTP 소개.

(2) AJAX 1부:

Ajax 및 비동기 개념 소개, Ajax 프레임워크 캡슐화, XMLHttpRequest 객체에 대한 자세한 소개, 호환성 처리 방법, Ajax 프레임워크 캡슐화, Ajax의 캐싱 문제, 소개 및 XML 사용, 미팅 간단한 GET 또는 POST 요청 처리,

(3) AJAX 파트 2:

JSON 및 JSON 구문 분석, 데이터 바인딩 및 템플릿 기술, JSONP, 크로스 도메인 기술, 이미지 사전 읽기 및 지연 로드 기술 , JQuery 프레임워크 AjaxAPI, Ajax를 사용하여 폭발적인 스트리밍 사례를 달성합니다.

네 번째 단계: 객체지향 고급

(4) 객체지향 최종장:

메모리 관점에서 JS 객체지향, 기본 유형, 복합 유형, 프로토타입 체인, ES6의 객체지향 이해까지 , ES6 변수 범위(let, const(변수 읽기 전용 선언), 블록 수준 범위), ES6 함수의 새로운 기능입니다.

(5) 객체 지향의 세 가지 주요 특징:

상속, 다형성 및 캡슐화.

(6) 객체 지향에서 객체를 생성하는 다섯 가지 방법:

사용자 정의 객체, 팩토리 모드에서 생성된 객체, 생성자, 혼합 모드에서 생성된 객체, JSO 형식으로 생성된 객체.

다섯 번째 단계: 자신만의 프레임워크 캡슐화

(1) 프레임워크 캡슐화 기본 사항:

이벤트 흐름, 버블링, 캡처, 이벤트 객체, 이벤트 프레임, 선택 프레임.

(2) 프레임 캡슐화의 중간 수준:

모션 원리, 단일 객체 모션 프레임, 다중 객체 모션 프레임, 모션 프레임의 객체 지향 캡슐화.

(3) 고급 프레임워크 캡슐화 및 보완 사항:

JQuery 프레임워크의 프로토타입, 확장성, 모듈성 및 캡슐화는 Chuanzhi의 자체 프레임워크에 속합니다.

제6단계: 모듈형 컴포넌트 개발

(4) 컴포넌트 지향 프로그래밍:

컴포넌트 지향 프로그래밍 방법, 컴포넌트 지향 프로그래밍의 구현 원리, 실용적인 컴포넌트 지향 프로그래밍, 웹사이트 기반 애플리케이션 개발 구성 요소 기반 아이디어에 대해

(5) 모듈 지향 프로그래밍:

AMD 디자인 사양, CMD 디자인 사양, RequireJS, LoadJS, Taobao의 SeaJS.

7단계: 주류 인기 프레임워크

(1) 웹 개발 워크플로:

GIT/SVN, Vue-cli 스캐폴딩, NPM/Bower 종속성 관리 도구, Grunt/Gulp/Webpack.

(2) 주류 프런트엔드 프레임워크:

Vue.js, Angular.js, React.JS, Bootstrap.

(3) 일반적으로 사용되는 라이브러리:

React.js, Vue.js, JQuery.js.

8단계: Node.js 풀 스택 개발:

(1) 빠른 시작:

Node.js 개발, 생태계, Io.js, Linux/Windows/OS X 환경 구성, REPL 환경 및 콘솔 프로그램, 비동기 프로그래밍, 논블로킹 I/O, 모듈 개념, 모듈 관리 도구, 개발 프로세스, 디버깅, 테스트 .

(2) 핵심 모듈 및 개체:

전역 개체 전역, 프로세스, 콘솔, 유틸리티, 이벤트 기반, 이벤트 이미터, 암호화 및 암호 해독, 경로 작업, 직렬화 및 역직렬화, 파일 스트림 작업, HTTP 서버 및 클라이언트, 소켓 .IO.

(3) 웹 개발 기본 사항:

HTTP 프로토콜, 요청 응답 처리, 관계형 데이터베이스 작업 및 데이터 액세스, 비관계형 데이터베이스 작업 및 데이터 액세스, 웹 애플리케이션의 기본 Node.js 개발 및 웹 개발 워크플로, Node.js Node.js 개발 블로그 사례.

(4) 신속한 개발 프레임워크:

Express 소개 + MVC 소개, Express 일반 API, Express 라우팅 모듈, Jade/Ejs 템플릿 엔진, Express를 사용하여 블로그 케이스, Koa 및 기타 일반 MVC 프레임워크 재구성.

(5) Node.js 전자상거래 실무 개발:

요구사항 및 디자인, 계정 모듈 등록 및 로그인, 회원 센터 모듈, 프론트 데스크 디스플레이 모듈, 장바구니, 주문 결제, 온라인 고객 서비스 인스턴트 메시징 모듈.

더 많은 관련 지식을 알고 싶으시다면 PHP 중국어 홈페이지를 방문해주세요! !

위 내용은 프론트엔드에 대해 무엇을 배워야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.