前端工程师-2020版

前端工程师-2020版

超清原画 完整无密 网盘下载

前端开发相比其余IT开发岗位，门槛更低，更易上手，更适合初学者学习
近几年的前端职业趋势逐渐走高。薪资可观，前景看好，如今入行刚恰好！
章节目录：
阶段一：前端基础入门
27门课 /课程总时长：47小时 /练习题：405 /大做业：2 /考试：2 /教辅资料：68

第1周 HTML5基础语法与标签
本周是入门前端的第一步，学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周内容能够进行简单的页面结构搭建。

课程安排：
一、了解前端行业发展
二、了解HTML5对于网页的意义
三、学习经常使用标签/属性，进行结构搭建
四、掌握无序列表/有序列表/自定义列表
五、学习表单标签/属性，能建立常见表单结构
六、掌握标签嵌套规则/行内元素/块元素的使用
七、学习VSCode开发工具使用，能建立简单网页

第2周 CSS3基础语法与盒模型
CSS3是网页的"美容师"，本周开始学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，可以对网页进行简单的样式开发。

课程安排：
一、掌握CSS3基本语法和使用
二、掌握CSS3各种选择器/样式属性，快速进行样式设置
三、学习文本、字体等常见属性
四、盒子模型核心知识讲解，深刻理解原理
五、掌握行内元素和块级元素设置与转换

第3周 CSS3浮动定位与背景样式
简单的样式开发还不够，经过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。可以进行特殊图形绘制，开发更美观的网页效果。

课程安排：
一、浮动与定位核心知识，灵活运用实现网页布局
二、常见布局方法，解决布局常见问题
三、如何绘制圆角边框/阴影框/图片边框等特殊图形
四、掌握元素扭曲/移位/旋转，更自由的装饰HTML
五、BFC规范和浏览器差别

第4周 CSS3动画与穷游首页开发实战
CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。

课程安排：
一、大项目：结合H5/CSS3，完成PC端仿穷游首页布局开发
二、掌握不一样布局结构与技巧
三、掌握过渡的使用与缓动效果，实现常见小案例
四、运用动画效果，实现炫酷动画效果
五、大做业：慕家居网页布局开发

第5周 JS基础语法与表达式
JS是网页编程的第一步，本周开始学习JS编程语言，掌握基础语法结构、变量声明和命名规则、数据类型、表达式和操做符，学完本周内容能够进行简单的JS代码编写。

课程安排：
一、掌握JS基本语法使用
二、掌握JS变量声明与提高的机理
三、掌握JS运算符操做与表达式
四、学习基本数据类型和复杂数据类型使用
五、深刻理解数据类型转换与检测
六、小案例：计算器和表达式综合运用

第6周 JS流程控制语句与数组
本周继续深刻学习JS编程语言，掌握条件分支语句、循环语句和数组，学完本周内容能够用简洁的代码实现强大功能。

课程安排：
一、掌握if，if elseif，switch等条件分支语句使用
二、掌握for、while、do while循环语句使用
三、掌握数组基本使用和经常使用方法
四、break和continue语句的特色及应用
五、运用数组知识，学习基本算法
六、使用简单的逻辑实现复杂业务逻辑
七、小案例：常见算法综合运用

第7周 JS函数与DOM
如想实现更炫的动态效果，那么操控网页元素很重要，经过掌握函数编程、DOM操做、事件以及BOM对象，让你能实现典型的触发和动态交互效果。

课程安排：
一、掌握DOM操做和DOM事件
二、掌握函数基础与函数高级应用
三、掌握BOM浏览器对象模型，与浏览器“对话”
四、掌握函数封装，提高编码质量
五、小案例：有趣的动画效果开发

第8周 面向对象
面向对象是开发中很是重要的思想，在本周咱们将开始运用面向对象思想进行程序开发，编写高质量代码，解决企业级编程协同问题。

课程安排：
一、学习this规则与使用
二、掌握构造函数概念以及建立、调用与使用
三、理解原型和原型链的关系与运用
四、闭包和做用域应用
五、熟练使用面向对象思想进行DOM编程
六、掌握JS模块化编程方式，编写高质量代码
七、掌握模块化开发技巧，解决企业级编程协同问题
八、小案例：俄罗斯方块游戏开发

第9周 项目实战：仿穷游JS特效开发
实战出真知，本周综合运用H五、CSS3和JS所学知识，从0到1完成一个具有CSS3动画和JS特效的多特效旅游网页。掌握企业常见的网页开发方式和各种特效实现方案。

课程安排：
一、结合H5/CSS3/JS，完成PC端仿穷游首页特效开发
二、项目动画效果分析，帮助更快梳理思路
三、实现典型JS特效效果：Banner轮播图、返回顶部动画、垂直菜单
四、学习正则表达式，完成常见手机号、邮箱、姓名等功能验证
三、大做业：慕家居网页JS特效开发

阶段二：组件化与移动WebApp开发
24门课 /课程总时长：53小时 /练习题：137 /大做业：3 /考试：2 /教辅资料：89

第10周 ES6基础入门
ES6是JavaScript新的语法规范，让代码更规范、可读性高、方便操做。本周将开启ES6的学习，这是学习前端必备的一步。掌握ES6相关知识后，可以更便捷的编写代码，提升开发效率。

课程安排：
一、ES6基本语法与使用
二、掌握ES6中变量和常量的使用与区别
三、学习能够嵌入表达式的字符串字面量--模板字符串
四、掌握箭头函数的特色与应用
五、掌握如何自动解析数组或对象中的值
六、了解对象字面量更加简洁与灵活的表达方式
七、掌握参数默认值的使用

第11周 ES6语法扩展
本周将继续学习ES6的基础，经过进一步学习ES6引入的新特性，了解ES6的新方法，掌握新的集合类型，更深刻的了解数据的遍历。

课程安排：
一、剩余参数与展开运算符的对比进行学习
二、了解如何实现减小逻辑或操做符的使用
三、认识ES6中新增的数据结构
四、了解ES6中新增的方法
五、了解遍历原理，以及学习新的循环方式

第12周 ES6之Promise与Class类
Promise 和 Class（类）是ES6中很是重要的知识点。Promise 是异步编程的一种解决方案，比传统的回调函数更合理和更强大。Class（类）来做为对象的模板使用，强化面向对象的使用。

课程安排：
一、学习如何高效解决回调地域问题
二、了解如何运用ES6 Promise进行异步编程
三、掌握Class基本语法的使用
四、掌握更加清晰与便捷的对象继承方式
五、掌握更高级的面向对象编程思想

第13周 ES6之Module模块与Babel编译
ES6 在语言标准的层面上，实现了模块功能。能够实现将一个大程序拆分红互相依赖的小文件。而babel的使用，完美的解决了ES6的兼容性问题，让ES6有更多可能性，使先后端差别愈来愈小。

课程安排：
一、了解企业级的开发形式——模块化的使用
二、学习将一个复杂的功能拆分，从而提升复用率
三、了解如何更好的维护代码
四、掌握babel转换器的使用，解决ES6的兼容问题
五、学习如何将Webpack与配合Babel使用，完成更高效的开发
六、掌握Webpack项目构建配置

第14-15周 HTTP 协议、存储、Ajax
本周将开启先后端数据交互的学习，来理解先后端开发的区别，了解网络通讯的相关概念，并对与后台通讯、获取数据有一个初体验。概念比较抽象，先做为了解。在后面项目开发环节，随着对知识的运用，对概念会有更深一步的理解。

课程安排：
一、了解如何区分先后端
二、理解HTTP协议，熟悉网络通讯相关概念
三、学习本地存储的多种方式，了解数据缓存机制
四、了解JOSN数据的几种书写格式
五、熟悉原生Ajax请求流程与细节
六、掌握常见的跨域技巧
七、学习如何本身封装Ajax
八、了解基于promise的Ajax插件——Axios

第16周 项目实战：仿穷游组件化开发
组件化开发是一种高级编程思想，适用于团队协做开发，是企业中常见的一种开发模式。本周会使用组件化方式来完成“仿穷游商城首页”的重构。掌握组件化开发可以更好的促进团队协做，提升开发和调试效率，可维护性更高。

课程安排：
一、综合运用H5/CSS3/ES6等知识，使用“组件化的开发思想”重构旅游网首页
二、了解项目组件化划分方式
三、了解模块化与组件化区别
四、采用模块化与组件化结合的开发方式
五、使用Webpack构建项目
六、运用 art-template 模板引擎，高效开发
七、真实的数据接口，实现先后台联动
八、经过本身封装的Ajax向后端请求数据
九、使用Class、Module模块完成轮播图的基类，实现模块化，提升复用率

第17周 移动基础
移动开发基础是进行webApp开发第一步。本周将开启前端学习的新篇章。经过移动端基础知识的学习，可以独立实现适配不一样移动端终端的页面。

课程安排：
一、学习移动基础概念
二、理解移动端与pc端web开发的区别
三、掌握移动端经常使用的Rem适配方案
四、掌握Flex布局的使用
五、学习响应式布局开发
六、不一样的适配方法
七、学习栅格系统的使用
八、了解移动端屏幕、移动端浏览器、操做系统的不一样

第18周 移动进阶之高效开发
移动端高质量的开发，是移动端开发的必备技能。本周继续移动端的学习，学习移动端的事件、开发中的常见问题，以及如何使项目的性能更加优化。

课程安排：
一、掌握移动端经常使用的事件
二、小案例：移动端幻灯片的实现
三、移动端开发中常见的问题
四、主流移动端页面开发技术选型与解决方案
五、学习如何从HTML、CSS、JavaScript三方面优化性能

第19周 项目实战：仿穷游移动webapp开发
接下来的一周，咱们将迎来webApp项目的开发，实现从PC端开发迈向移动端。从项目分析、组件划分、结构搭建、功能实现、性能优化。体验真实企业中移动端项目的开发流程

课程安排：
一、综合运用H5/CSS3/ES6/移动知识，重构旅游网WebAPP的首页、目的地页
二、符合企业标准的开发流程，从项目分析、项目搭建、模块开发到数据对接
三、采用模块化与组件化结合的开发方式
四、使用Webpack构建项目
五、运用 art-template 模板引擎，高效开发。
六、完成 18 个典型组件开发（搜索、商品、导航等组件）
七、运用Swiper高效移动端插件开发轮播图
八、使用Ajax 处理与获取数据
九、如何处理屡次请求的解决方案
十、如何运用组件化思惟，拆分和复用组件
十一、完成各组件性能的优化

阶段三：小程序与主流框架开发
14门课 /课程总时长：48小时 /练习题：175 /大做业：3 /考试：1 /教辅资料：10

第20周 小程序基础与慕课小程序实战
本周开始学习爆火的轻应用开发技术——小程序 。经过对小程序知识的学习，可以独立开发企业级小程序，拥有解决主流小程序功能需求的能力。

课程安排：
一、大项目：结合Flex/Template模板，开发慕课小程序首页/活动页/热门排行页
二、了解小程序注册流程/注册方式/注册主体
三、小程序的全局生命周期和页面级生命周期
四、小程序基础语法与经常使用API
五、小程序开发工具的调试办法
六、小程序多页面下的开发工做流及目录结构

第21周 React.js基础语法与新闻网站实战
React.js是企业开发热门框架之一 。经过对React.js基础和项目的学习，具有构建企业级项目和解决核心业务问题的能力，快速接入企业项目。

课程安排：
一、大做业：运用React组件完成新闻网站项目常见功能开发
二、理解React的开发理念与内部原理
三、React的基本使用及Ant Design组件库进行项目开发
四、使用React封装项目中用到组件，实现复用
五、React项目中常见问题的解决方案
六、如何运用React-Redux进行状态管理
七、声明式编程的思想与组件化开发的思想

第22-23周 Sass基础与Vue.js基础语法
Vue.js是企业开发另外一热门框架，易用、灵活、高效，对于初学者很友好。本周经过对Vue.js基础和Sass布局技术的学习，为后续的全栈项目开发打下基础。

课程安排：
一、大做业：订单列表和购物车列表页
二、掌握Webpack项目构建配置
三、掌握基础语法与常见API
四、组件的使用及组件的生命周期
五、Axios网络请求及路由使用
六、Vuex的引入、应用场景及项目中的实现
七、使用Vue.js技术栈进行项目开发的方式方法
八、掌握Sass布局基础

第24周 项目实战：Vue.js仿京东到家电商全栈项目前端开发（上）
从本周开始进入到电商全栈项目开发，首先使用Vue.js前端实战的第一部分首页和商家详情页，还原实际开发流程，综合运用所学知识，完成页面开发，掌握开发中常见问题解决技巧。

课程安排：
一、综合运用Sass和Vue.js完成登陆页/注册页/首页/商家详情页
二、使用vue-cli4.0建立开发环境
三、使用axios发送Mock请求
四、使用路由守卫实现基础登录校验功能
五、动态路由/异步路由与组件拆分复用
六、首页/商家详情页数据渲染
七、Vue.js项目中常见问题的解决方案

第25-26周 项目实战：Vue.js仿京东到家电商全栈项目前端（下）
Vue.js前端项目实战的第二部分，实现电商核心业务订单和地址管理模块，掌握开发中常见问题解决技巧，真实数据访问，开发完整的Vue.js电商前端项目。

课程安排：
一、综合运用Sass和Vue.js完成订单提交页/地址列表页/地址编辑/地址新建页
二、使用axios发送Mock 请求
三、动态路由/异步路由与组件拆分复用
四、订单提交页/地址列表页数据渲染
五、Vue.js项目中常见问题的解决方案
六、步骤大做业：完成订单列表页和购物车列表页开发

阶段四：Node.js全栈开发
11门课 /课程总时长：42小时 /练习题：56 /大做业：1 /考试：1 /教辅资料：59

第27周 全栈必备基础Node.js
学前端不至于前端，从本周开始学习服务端基础知识，掌握什么是服务端以及服务端必备node.js，夯实基础，迈进前端全栈开发。

课程安排：
一、案例：搭建node.js服务器及建立MongoDB数据库
二、了解什么是服务端，服务端与前端的关系
三、掌握commonjs模块化与npm插件使用
四、掌握inspect调试方法

第28周 koa2中间件与MongoDB数据库
真实企业开发离不开数据库，Koa2框架有效的提升开发效率，本周掌握前端必备的前端全栈开发知识，为后面开发全栈项目蓄力。

课程安排：
一、了解koa2中间件与洋葱圈模型
二、了解关系型数据库与MongoDB基础API详解
三、掌握node.js操做MongoDB方法与mongoose规范数据模型

第29-30周 项目实战：node.js仿京东到家电商全栈项目后端开发
本周开始进入到电商全栈项目的后端开发，对标企业标准开发流程。从登陆实现方案、项目需求分析、接口和数据结构设计到业务开发，帮你打通先后端任督二脉，突破全栈技术瓶颈，为就业加码。

课程安排：
一、综合运用Node.js+koa2+MongoDB，实现电商全栈项目的后端
二、掌握企业的开发流程与技巧，从0到1一步步实现
三、项目采用先后端分离开发模式
四、核心业务的数据库设计与实现
五、真实数据接口和设计与实现
六、Koa工做流程及常见Koa中间件使用
七、掌握先后端数据联调技巧，打通先后的数据交互
八、常见MongoDB与nodejs集成
九、了解cookie 和session的关系
十、大做业：订单和购物车列表页的数据库和接口设计

第31周 就业必备基础技术面试分析
面试是通往成功就业的关键一步，本周包含布局基础以及JS和ES6等常见考点和经典面试题分析，带你把知识串成线，掌握前端面试技巧，顺利通关基础技能面试。

课程安排：
一、H5语义化/CSS布局/定位/图文样式/响应式面试解题技巧
二、原型和原型链的5个原则与面试解题技巧
三、变量类型/计算/构造函数的面试解题技巧
四、做用域和闭包的执行上下文/this面试解题技巧
五、异步和单线程/常见的内置对象面试解题技巧
六、DOM本质/节点操做/BOM操做面试解题技巧
七、AJAX与事件解面试题技巧

第32周 就业必备框架与全栈技术面试分析
框架、小程序以及全栈相关内容也是面试必考。本周带你们梳理的常见考点和经典面试题分析，理清面试解题方法论，完成最后一厘米的冲刺。

课程安排：一、Vue.js原理/MVVM面试解题技巧二、组件生命周期/父子组件传值面试解题技巧三、组件异步加载/缓存/抽离公共逻辑面试解题技巧四、vue-router/data监听面试解题技巧+5道Vue.js真题演练五、React基础语法/事件面试解题技巧六、React组件生命周期/父子组件通信面试解题技巧七、React函数组件与class组件区别面试解题技巧八、Redux/react-router面试解题技巧