饥人谷前端体系课详细介绍

前言

最早关注我们的伙伴们可能都知道饥人谷一直在做编程培训，我和

写过很多技术文章，回答过很多关于0基础如何学前端的问题，多次分享过转行前端的学习路线、面试知识点。饥人谷前端学习指南 专栏创建5年多写了数百篇文章，仔细想想好像没有一篇文章正儿八经的介绍过饥人谷课程规划的思路、课程内容。好吧，承认自己爱用战术上的勤奋掩盖战略上的懒惰也不是什么非常丢脸的事。

饥人谷有两个slogan。其中一个是“求知若饥，虚心似谷”，这也是饥人谷这个名字的由来，目的是告诫谷里的学生也是告诫自己，既要永无休止的学习不被行业和时代抛下，又要不管任何时候都保持对知识的谦虚和对人的大度。 另一个slogan是“培养有灵魂的工程师”，这是我们的目标，也是一直正在做的事。

很多人对培训机构有偏见，甚至连自己都未曾免俗。饥人谷除了做编程培训也有其它产品线，我自己在招人时程序员都是从自己的学生里亲自培养，但涉及到类似产品、设计的岗位，面对培训机构出来的千篇一律看起来高大上的简历，心里也会犯怵。这种感觉怎么说呢，就像看到一个10岁的小孩身体里装着40岁中年人的灵魂，这个不兼容的老灵魂暂时能让小孩表现的像个正常人一样去做事，但仅是昙花一现。很多人说培训机构只能填鸭式的教人“术”，培养出来的学生基础薄弱机械盲目只会生搬硬套不知变通，没有学习能力，没有解决未知的问题的能力，没有深究的能力。有的机构甚至教一些弄虚作假投机取巧的伎俩。之前甚至听说某些机构的老师先冒充学生去面试，套题后教会学生再让学生去面。听闻后又怜又恨。怜的是这样为学生就业负责的老师真的稀缺，恨的是走了歪门邪道毁了学生也毁了行业。

不想再辩什么，这是培训行业的现状，几年前如此，现在也没太大改变。改变不了只能从我做起，从我们决心把“培养有灵魂的工程师”作为slogan做起。

灵魂

恕我打个不恰当的比喻，本质问题是如何用“家养”的方式培育“散养”优质初级程序员。散养的优秀初级程序员一般有这些特征：基本功足够扎实，知识体系化，适当全面，对原理的理解有一定深度，有自我推进的意愿，有解决问题的科学思路，有一个合格程序员该有的编程习惯，有一定的思辨能力。

基本功扎实、知识体系化、适当全面、追求原理，这些体现在课程内容的规划上。而自我驱动、解决问题的思路、编程习惯、思辨能力则在整个学习周期通过和老师互动的方式培养。

下文主要通过课程内容和能力培养两方面来讲，后续内容很长，但全是干货，如看不完建议先点赞后收藏。

整个学习周期需要学习的内容为四部分：【 体系课任务】、【 拓展课直播】、【 项目课】、【 提升小课】。

体系课任务学习主线，包含整个前端知识框架和随堂项目，含80～100个任务，每个任务学习时间为1～2天 。

拓展课直播是体系课以外知识拓展，以直播形式开展，穿插在日常学习中。面向大厂校招和中高级前端，如新技术、高难度知识、学习方法、模拟面试、刷题等。

完成体系课任务后，进入项目课环节从项目库中挑选4～6个项目，跟随课程完成项目，并制作简历

提升小课是体系课以外知识拓展课程作为可选补充，着重面向大厂校招。比如有HTTP系列、Web安全系列、算法系列、Node.js课程、移动端课程。适合想去大厂或者追求高待遇的同学。

【 体系课任务】

体系课任务把必学的前端整个知识封装成80～100个任务，每个任务包含约2小时视频、文章、测试、作业、项目挑战。任务默认锁定，完成且作业被批改通过后会自动解锁下个任务，强制学生踏实完成每一个任务。整个系统任务的学习大致能分为8个阶段，其中Phase 6和Phase7根据学生技术栈方向的选择可任选其一。

Phase 0: 编程基础

• 互联网产品开发流程、Web应用各部分的逻辑关系
• 命令行、环境变量、vim、markdown
• Git和Github项目管理

Phase 1: HTML重难点

• HTML/CSS/JS历史和发展、浏览器种类、内核
HTML常见标签、属性的含义和用法，详细讲解表格、输入表单的用法
• 讲解HTML5概念及常见标签

Phase 2: CSS重难点

• CSS2(3)选择器权重、优先级、匹配顺序、继承、单位
• 两种盒模型
• 块、行的特性、边距折叠的概念和原理
• 浮动的特性，几种方式清除浮动
• 讲解BFC与 各种FC的概念
• 详细介绍定位各种用法
• 讲解层叠上下文的概念
• Flex布局做页面，flex-basis、flex-grow、flex-shrink的计算方法
• 讲解Grid布局做页面
• 垂直水平居中的几种实现
• 浏览器兼容处理
• 页面响应式
• 伪类、伪元素、字体图标、svg图标
• 介绍使用CSS3常见特效如圆角、阴影、形变、过渡、动画

Phase 3: JavaScript核心知识

• 讲解ES5/ES6常见语法，包含变量声明、声明前置、运算符、表达式、循环语句、函数/箭头函数、作用域链、闭包、正则、数组、字符串、Date、Math、对象、引用类型、深浅拷贝、定时器、同步异步、eventloop等
• 讲解对象、原型、原型链、ES6 class、this、call、apply
• 继承的原型和class实现
• 闭包与柯里化封装
• DOM和属性点遍历、修改、删除、添加
• 讲解事件流、冒泡、捕获、事件代理原理和应用
• 讲解window、navigator、cookie、session、localStorage
• 实现Tab切换、折叠面板、Message消息提示、Tooltip文字提示、回到顶部、FullPage、Dialog组件、Carousel走马灯组件
• Ajax原理、使用和封装
• 分别是用Node.js/Mock.js/Rap2 来mock数据
• 异步、Promise、async/await、手写Promise
• 讲解JSONP、Cors、服务器中转等跨域方法

Phase 4: 课程项目

• 原生JS实现一个在线PPT生成工具oneslide，并发布上线
• 用户可使用markdown写内容，一键转换成酷炫slide
• 支持效果切换、风格切换、图片上传等功能
• 项目的核心是实现了一个markdown语法解析器

Phase 5: 前端工程化与模块化

• Node.js基础、CommonJS规范
• NPM、Yarn、发布自己的Package
• 模块化、ES6Module、Parcel构建项目
• Webpack的使用、配置。资源管理、输出、HMR、treeshaking、代码分离
• Webpack插件、Loader的实现

Phase 6: React的应用、原理、实现

• JSX、set State同步与异步更新、this
• 列表、受控与非受控组件、Context、数据传递、错误边界
• Class组件和函数组件
• React Hooks的用法、原理
• 造一个简易 ReactHooks
• CSS Module、样式组件
• create-react-app搭建React全家桶项目
• mobx的核心概念与使用、装饰器用法
• mobx-react 在class组件和函数组件的使用
• ReactRouter使用、代码分割、Hooks的用法
• React Diff 原理
• 造一个简易React

Phase 7: Vue2(3)技术栈

• 组件实例、生命周期
• data、methods、computed、watch区别
• Vue2和Vue3的响应式原理，手写reactive 实现track trigger
• 条件、列表、事件、组件、双向绑定、单向数据流
• Vue3组件注册、Props、Attribute、自定义事件
• 插槽、具名插槽、作用域插槽
• 爷孙数据传递Provide&Inject
• 动态组件与keep-alive
• 过渡与动画
• 使用Vue CLI4 搭建Vue项目
• Vite 的原理、使用
• 组合式API 重构项目
• VueRouter3(4)的原理和使用
• Vuex3(4)的原理和使用
• 虚拟DOM与Diff算法
• Vue2和Vue3区别
• 造一个简易Vue

Phase 8: 前端刷题写简历

• CSS必刷题
• JS常见手写代码如bind、new、Promise、防抖节流、数组拍平、深浅拷贝等
• JS疑难知识点，如异步、闭包、性能优化、垃圾回收、事件循环、微任务宏任务等
• Vue面试题集合
• React面试题集合
• Webpack面试题集合
• 如何写简历
• 如何谈offer、如何挑选offer

【 拓展课直播】

拓展课直播用于通过直播互动的方式讲解课程重难点，如学生在做任务时难以理解的知识点、学习方法分享、模拟面试、新技术、疑难杂症、大厂面试、拓展知识等。直播为每周2次，每次约两个小时，多次直播会连续讲同一个系列主题。如讲【算法系列】时会会讲大厂面试常见的所有算法。拓展直播作为学习补充，适用于对知识深度和广度有更高要求的同学，如校招大厂或者预期拿15k以上的offer的同学。

以下所列主题均为近期直播过的主题，未来直播课中直播主题不限于这些。

• 【算法系列】链表反转、环判断、链表交点、链表相加、去重、合并、排序
• 【算法系列】快排、插入排序、选择排序、冒泡排序
• 【Vue3系列】Vue3响应式原理
• 【Vue3系列】Vue3 diff算法精讲
• 【Vue3系列】Vue3 组合式API用法
• 【Vue3系列】Vuex 原理
• 【Vue3系列】VueRouter 原理和简易实现
• 【Vue3系列】虚拟长列表的实现和优化
• 【HTTP系列】HTTP2的特性与HTTP3
• 【TypeScript系列】TypeScript中的范型
• 【JavaScript系列】事件循环与EventLoop
• 【手写代码系列】手写new、Promise、async/await
• 【模拟面试系列】三年前端面试
• 【班级茶话会系列】小姐姐的茶话会
• 【学习方法系列】前端学习躲坑指南
• 【程序员话题系列】程序员的软技能
• 【计算机基础系列】编译器原理
• ......

【 项目课】
在学完系统任务后进入项目环节，学生根据技术栈方向选择，从项目库中选择3～4个应用类大项目和2～4个造轮子类的小项目搭配。

应用类项目

1. 记账Webapp React版，技术栈：React、CRA、styled-components、 React Router、TypeScript、 Echarts
2. 记账Webapp Vue2版，技术栈：Vue2、VueCLI、TypeScript、Vue Router、Vuex、Echarts
3. 造一个简易UI框架Vue3版， 技术栈：Vue3、TypeScript、 Vue CLI、Mocha、Chai、Travis CI、VuePress
4. 造一个简易UI框架React版， 技术栈：Webpack、React、TypeScript、Jest、Scss
5. React大屏项目，技术栈：React、React Router、Echarts
6. 印象云笔记Webapp，技术栈：Vue2、Vue CLI、Vue Router、Axios、ElementUI、Vuex
7. 在线图床，技术栈：React、CRA、styled-components、React Router、Mobx、Antd
8. 博客系统，技术栈：Vue2、VueCLI、Axios、Vuex、VueRouter、ElementUI
9. 华为音乐Webapp，技术栈：HTML5、CSS3、JavaScript、Parcel.js
10. 在线Slides生成工具，技术栈：HTML5、CSS3、JavaScript、Parcel.js
11. 翻译小程序
12. 命令行天气预报
13. Node.js在线便利贴

造轮子类项目

1. Webpack repalace-loader
2. Webpack markdown-loader
3. Webpack clean-plugin、timecount-plugin
4. 实现简易React Hooks
5. 实现简易React
6. 实现简易Vue
7. 实现简易模块打包器
8. 实现简易模块加载器
9. 实现简易Express.js
10. 实现简易Redux
11. 实现简易Promise
12. 实现简易JQuery
13. 实现一套简易移动端手势库

【 提升小课】

免费可选课程，用于冲刺大厂或者拿高薪的拓展小课，涵盖算法、移动端、Node.js、HTTP、小程序、设计模式等。以下是小课范例。

算法小课

• 快速排序、插入排序、选择排序、冒泡排序
• 反转链表、链表环判断、链表相加、删除链表重复元素、合并有序链表
• 跳台阶、斐波那契数列优化、表达式求值
• 二分查找、KMP算法
• 二叉树先序、中序、后序遍历、根据先(中)序排列重建二叉树
• 求连续子串、反转字符串、最长回文子串、大数相加、最长公共前缀
• 合并两个有序数组、根据找数组累加等于和的项
• 子数组最大累加和、最长公共子序列
• 寻找第k大数

移动端小课

• 物理像素、逻辑像素、CSS像素、PPI
• viewport的原理和用法
• 移动端动态rem适配
• 移动端动态viewport适配
• 移动端动态vw适配
• 移动端的手势
• 实现细边框
• 300ms延时、fastclick

HTTP小课

• 三次握手与四次挥手
• HTTP报文、状态码、请求/响应有哪些字段
• 缓存的机制
• keep-alive与多路复用
• Cookie 与 Session
• Session、JWT认证机制
• HTTP2.0的原理与HTTP3.0
• 基础密码学原理、HTTPS的原理
• SQL注入、CSRF、XSS

Node小课

• Node.js 技术架构
• 单元测试之文件模块
• 调试 Node.js 程序
• 静态服务器
• 命令行翻译工具
• 操作数据库
• 数据库基础知识 Stream 流 child_process

以上花费大量篇幅介绍了课程，这里简单聊一下综合能力培养。这些会通过和老师的直接交流、课程的安排和规定、课程里的强调来潜移默化的培养。

1. 体系化思维的培养。

学生入学第一件事是找老师语音约聊，我一般着重交待要做的两件事是 做笔记 和写博客。怎么做笔记呢？要求学生在用4～6个月的时间做一套结构完整的前端学习入门简化版教程。学习的每一章节时搭建好对应的目录，用最简单的语言最少的代码填充该目录下的内容。整个学习周期甚至在工作后也应该不断打磨和扩充。未来遇到任何小知识小问题，都可以和自己的知识树做个对应，查缺补漏，让自己的知识树不断发芽成长。

为什么很多程序员即使工作多年也觉得自己知识零散不成体系呢？那是因为在初学一个知识的时候是没有能力建立体系思维，也分不清重点，等到后期有能力的时候之前所学零散的东西早已遗忘。想抓回来重新复习也无从下手。

2. 养成好的编程习惯

搜索的习惯：能科学上网、会搜索、会找最权威参考、会跟着官网学习新知识。

提问的习惯：懂得程序员提问规范，知道提问要提供代码、环境、预期、现状几个要素。

分享的习惯：会写文章，分享自己的经验，开源自己的项目，阐述自己的观点。

3. 综合能力的培养

懂得如何真实但聪明的展示自我。

祝求职的小伙伴offer连连，祝在职的小伙伴步步高升，祝看到这篇文章的伙伴们都有美好的未来。

（近期开班，了解课程私信我）