课程介绍

1. 深入全面、实战为王

知识体系全:八大模块全方位覆盖“HTML5、JS(ES6/ES7)、AJAX、跨域、TCP网络通信、Hybrid移动端、Vue、 React、Node、 小程序、算法”等前端开发核心知识;

课程内容深: JS/浏览器的底层运行机制、各种源码分析、插件组件封装、核心原理解读等应有尽有;

实战项目多: 10个以上阶段性课堂实战案例,8个以上一线企业原版大型实战项目...阿里P5+就是要靠实战训练“砸”出来!

2.教学服务周全,保证学习效果

1.采用直播+录播:随时预习随时复习,充分吸收所学知识。

2.陪伴式教学服务:课前提醒,考勤监督,作业批改,在线答疑,阶段性考试等。

3.灵活付费:学习无忧,付费方式灵活,多个分期付款平台可选,一周无理由退费!

适合人群

在校
大学生

在校大学生,或前端开发自学者

无前端
基础

想要系统全面深入学习前端开发的初学者

有前端
基础

缺乏项目实战经验的前端从业者

讲师介绍

讲师周啸天

周啸天

珠峰培训教学总监
原腾讯高级前端开发工程师

讲师王燕

王燕

珠峰培训资深讲师
原乐视、中国平安高级前端开发工程师

课程大纲

模块一:全面攻克JavaScript底层三座大山

1. 堆栈内存及闭包作用域

● JS中的8种数据类型及区别

● JS堆栈内存的运行机制

● 变量提升机制

● 作用域和作用域链

● 闭包的两大作用:保存/保护

● JS编译机制: VO/AO/GO

● JS高阶编程技巧:惰性函数/柯理化函数/高阶函数

● BAT经典面试题讲解

2.面向对象(OOP) 和this处理

● 单例设计模式

● 类和实例

● 原型和原型链

● new运算符的实现机制

● call/apply/bind

● constructor构造函数模式

● JS中this五种情况的综合梳理

● JS中的四大数据类型检测方案

● JS中的四大继承方案(含深浅拷贝)

● BAT经典面试题讲解

3. DOM/BOM及事件处理机制

● DOM/BOM的核心操作

● 事件对象

● 拖拽及拖拽插件封装

● 发布订阅设计模式

● 深度剖析JQ源码

● 事件传播机制和事件代理

● DOM2级事件的核心运行机制

● 移动端Touch/Gesture事件及封装处理

● 浏览器底层渲染机制和DOM的回流重绘

● DIALOG模态框组件的封装

模块二:拥抱ES6/ES7和AJAX前后端交互时代

1. ES6/ES7的核心知识

● let/const及和var的区别

● 箭头函数ArrowFunction

● 解构赋值和拓展运算符

● Set/Map数据结构

● Promise设计模式

● async/await及实现原理

● Generator生成器函数

● Promise A+规范(手写Promise源码)

● JS底层运行机制:单线程和同步异步编程

● JS底层运行机制:微任务宏任务和事件循环机制

● Interator迭代器和for of循环

2. AJAX/HTTP前后端数据交互

● AJAX核心四步操作

● GET/POST核心机制与区别

● TCP三次握手和四次挥手

● axios库和源码剖析

● fetch基础和实战应用

● 前端开发中的9种跨域方案

● HTTP网络状态码和实战中的处理方案

● 前端性能优化汇总(包含强缓存和弱缓存)

3.大型实战案例:企业级OA办公管理系统

● 登录注册的前后端处理机制

● 加密策略: encodeURIComponent
和MD5等

● 用户权限和登录态的校验处理

● 存储方案: cookie、webStorage、session等

● Token的校验处理

● JQ/BootStrap的实战应用

模块三:彻底掌握H5新特性和Hybrid混合开发

1. HTML 5的基础知识

● 响应式布局开发方案:@media/rem/flex

● viewport和dpi适配

● H5音视频处理方案

● 新表单元素和表单校验

● CSS预编译语言: less/sass

实战案例:创意H5场景交互案例

2. Canvas和Echarts实战

● canvas的基础用法

● canvas动画及小游戏开发

● canvas图像处理

● Echarts基础API

● 多元化/个性化数据图表练习

● 异步数据的处理和更新

● Echarts中的事件和行为

实战案例:基于canvas实现QQ头像的裁切和上传

3. DOM/BOM及事件处理机制

● Hybrid混合APP开发

● JSBridge通信机制和底层原理

● 微信JS SDK

● swiper/zepto移动端类库的实战应用

● 基于Hbuilder实现APP打包

● 移动端联调处理方案

模块四:Web前端开发的“工程化”和“全栈化”

1.深入高效的webpack核心配置及优化

● webpack核心基础知识

● 单(多)入口项目打包

● webpack devServer和Proxy代理

● loaders及plugins的处理

● CSS样式的抽离、压缩、兼容性处理

● resolve / sourceMap

● less/sass等预编译语言的处理

● 基于babel转换ES6/ES7语法及Polyfill兼容处理

● webpack性能优化(TreeShaking、 CDN加载、热更新、图片压缩等)

● vue-cli3.0脚手架的应用/配置和性能优化

2.全面贯穿node.js/express全栈开发

● node的安装和npm包管理器

● fs内置模块和PromiseFS封装

● AMD/CMD/CommonJS/ES6Module模块规范深度解析

● http内置模块和搭建web服务器

● 搭建数据服务器和实现RestfulAPI规范的接口

● Express框架基础知识

● Express中路由和中间件的实战应用

● 数据Mock和MongoDB数据库应用

实战案例:小米有品电子商城APP的Node后台开发
实战案例:企业级OA办公管理系统的Node后台开发

3. Git团队协作管理工具的应用

● 历史回滚和差异对比

● 和远程仓库的信息同步

● Git分支处理

● 分支合并和冲突处理

● Git的简介和安装

● 集中式(SVN)和分布式(GIT)的对比

● 工作区、暂存区、历史区、远程

● DIALOG模态框组件的封装仓库

实战案例:玩转GitHub和构建个人博客

模块五:彻底掌握Vue全家桶的实战应用

1. Vue核心基础知识和实战练习

● 事件处理及修饰符

● 表单元素的细节处理

● 条件和循环渲染

● vue transition动画和路由切换动效

● 生命周期(钩子)函数

● MVVM双向数据绑定实现的原理

● 受控组件(data)和非受控组件(ref)

● 常用的指令和Vue.directive自定义指令

● methods/watch/computed/filters

实战案例:购物车信息的管理

2. Vue组件化开发和Vuex状态管理

● 属性及属性处理

● $on/$emit自定义事件

● slot插槽(具名插槽和作用域插槽)

● mixin混入和Vue.use插件开发

● 复合组件信息通信的6大方案

● Vue.component全局注册和components局部注册

● template模板语法和render JSX语法

● Vuex基础: state/getter/mutation/action

● Vuex的模块化管理和mapXxx遍历

实战案例: TASK OA任务管理系统

3. Vue Router和UI组件库

● SPA (单页面应用)和MPA (多页面应用)对比

● HASH路由和BROWSER路由对比

● vue-router基础核心语法

● 编程式导航和动态理由

● keep-alive缓存

● 路由守卫及权限校验

● PC端组件库: element-ui的实战应用

● 移动端组件库: cube-ui和vant的实战应用

● Vue-DevTools

● 单元测试和性能优化

实战案例:基于Vue+VueRouter打造今日头条客户端
实战案例:基于Vue+VantUl/CubeUI开 发知乎日报APP
实战案例:基于Vue+Vuex开发QQ音乐播放器
大型实战案例:珠峰在线课堂APP
大型实战案例:企业级0A办公管理系统
......

模块六:彻底掌握React全家桶的实战应用

1. React核心基础知识和Hooks

● create-react-app脚手架的应用和优化

● JSX的基础知识和应用

● 虚拟DOM到真实DOM的渲染原理

● 属性和状态的管理(setState)

● 受控和非受控组件

● React合成事件和实现双向数据绑定

● 函数式组件及应用

● 类组件及其应用

● React.Component和React.PureComponent

● React Hooks组件及应用

2. React组件化开发和redux状态管理

● redux的操作流程和应用

● react-redux的实际应用和各种中间件

● React中的高阶组件

● dva和UmiJS

● 组件划分和组件封装思想

● 复合组件和组件嵌套

● 基于属性实现数据的单向(双向)信息传递

● 构建发布订阅体系完成组件信息交互

● 基于上下文(React.createContext)实现信息交互

实战案例: TASK OA任务管理系统

3. React Router和大型项目实战

● withRouter高阶函数

● 编程式导航和动态理由

● Ant Design UI库的实战应用

● HashRouter && Browser-Router

● React Router的基础常规操作

大型实战案例:小米有品电商APP

● axios/fetch的二次封装

● 第三方登录和支付功能

● API接口模块化管理

● 项目打包和服务器部署流程

模块七:微信小程序开发

● 获取用户信息及地理位置

● 小程序中的支付处理

● mpvue框架的实战应用

● uni-app框架的实战应用

● 小程序注册和IDE

● rpx适配、模板使用、图片处理等

● 小程序中核心组件/API的应用

● 导航及列表渲染(包含无限渲染)

● HTTP-PROMISE及和服务器的交互处理.

大型实战案例:腾讯体育(赛事直播/录播)小程序开发

模块八:面试题分析和就业指导

● HTML5/CSS3经典面试题分析

● JS/ES6-BAT经典面试题讲解

● Vue/React框架在面试中必须掌握
的问题

● Web前端开发中的经典算法解析

● 阿里九段人才培养方案中各级别的要求

● 教你编写出一份优秀的个人简历

● 十多年心血汇总:“面试必杀绝技”如何才能成为一名优秀的IT工程师

课程价格

课程 Web高级
课程周期 十二周
面向人群 前端开发自学者,在校学生,缺乏实战经验的前端从业者
学习目标 你将接触到前端最前沿的技术框架,深入了解后台编程等内容, 做一个合格的全栈开发工程师
课程费用 Web高级课: 7960元
在线高级JS: 3980元
在线框架课: 3980元

Web高级公开课

微信咨询 珠峰培训微信二维码