《新 • 前端体系课》第72期
01 / 我们是怎样的
02 / 校友们的心路历程
我最大的感受是，1. 注重授人以鱼，不如授人以渔 ;2.对于学习中遇到的问题，先自己独立思考、分析、google，若还是不明白再去问老师;3.同学之间相互交流，学习氛围浓厚；虽是网络教学，彼此都没有见过面，但是前端让大家心心相惜；4.若真心喜欢前端，这里会给你一个很好的平台；很庆幸自己来饥人谷，遇到了若愚老师，方方老师，教导员青青和墨凌，还有一群喜欢前端的小伙伴们，大家一起学习，经历和成长，很开心；5. 做你喜欢的，Stay hungry, Stay foolish。
在饥人谷学习的最大感受就是公平，你的付出跟回报是完全成正比的，付出的多，回报也不会少，反之亦然。学到现在才明白编程这条路其实很长，需要脚踏实地的走，这也是方方老师为什么一直在强调初学者基础的重要性，老师苦口婆心，而现实中，或许只有等自己工作了才会明白。应了那句话，道理都是讲给别人听的，只有经历才是留给自己的.在谷里学习的这段时间受益很多，我也会一直学习下去，over。
在成功转行， 内心还是很开心的。付出的能有回报那就是很棒了「嵌入式转前端」；...... ；在此我也想说其实真的我觉得在饥人谷， 更多的是学到了一套丰富的解决问题的方法，去掉了之前不会主动学习的懒癌，主动学习，自我学习的能力是我在这收获最宝贵的财富。为了实现更高的理想，还会不断的学习的。
03 / 教学模式或许更科学
| 阶段 | 内容 |
|---|---|
|
体系预习 (开班前1～2个月) |
✦ 入学后接受老师1v1语音约聊指 |
|
✦ 开通视频体系课作为预习学习，为直播课打好基础 |
|
|
直播开班授课 (3~4个月) |
✦ 直播跟班模式学习前端整个知识体系，统一开班，统一进度 |
|
项目实践 (1~2个月) |
✦ 个性化定制项目，让学生的项目不再千篇一律； |
|
求职阶段 (持续到就业) |
✦ 多个老师对1名学生进行单独的简历辅导； ✦ 1v1模拟面试； ✦ 海量面试和笔试押题及答案讲解； ✦ 校友优质岗位内推
|
|
持续成长 (长期) |
✦ 免费提供多个拓展课用于持续提升，如大厂手写源码系列练习、移动端专项学习、HTTP专项学习、设计模式等 |
04 / 令人激动人心的学习路线
|
走进前端工程师的世界 |
讲解互联网公司角色、项目发布流程、前端工程师职业要求、前端知识体系等行业入门知识 |
| 前端环境搭建/HTML |
讲解如何搜索、如何提问、如何写博客、markdown语法、学习资料、文章推荐等学习方法 讲解VSCode环境搭建、页面分块思路、重要标签、Emmet语法 |
| HTML标签、块、行、属性、规范 |
讲解常见标签、块与行、常见属性、HTML5标签、表单 讲解HTML规范、命名经验、常规命名法和BEM命名法 |
|
Git与Github |
讲解Git命令行日常使用、Github的使用 |
| CSS引入、规范、调试、选择器 |
讲解CSS引入方式，书写规范、调试方法 讲解几种选择器用法 |
| CSS选择器优先级、样式继承、文本样式 |
讲解样式优先级规范、选择器权重计算方式 讲解样式继承；单位px、em、rem、vw 讲解常见文本相关样式 |
| 布局模式、盒模型、块和行的特性 |
布局模式、盒模型、ie盒模型、标准盒模型、box-sizing margin:0 auto; display: block、inline、inline-block、none 区别 |
| CSS外边距折叠、CSS3常见特效 |
讲解外边距折叠的几种案例 CSS3背景、渐变、阴影等用法 |
| flex布局精讲 |
讲解flex布局的原理、使用范例 flex-basis、flex-grow、flex-shrink的三个属性具体用法 flex:auto、flex:1、flex:0区别 垂直水平居中 |
| grid布局的使用、浮动、BFC的原理 |
讲解grid布局的原理、使用范例 两栏布局、三栏布局 浮动的用法、清除浮动原理和写法 BFC概念、作用 |
| CSS定位、层叠上下文 |
定位的几个值用法和区别 下拉菜单的实现 实现垂直水平居中 层叠上下文的原理和案例分析 |
| iconfont、svgicon、CSS3动画、响应式 |
iconfont、iconpark的使用，字体图标、svg图标的使用 CSS3 过渡transition、动画animation、贝塞尔曲线案例 响应式布局@media用法和案例 |
|
实战 |
实现导航站/在线简历/企业站 |
|
数据类型、表达式、运算符 |
JS引入、控制台调试、变量、标识符规范、表达式、运算符、语句 八种数据类型 typeof详解 算术运算符，++i和i++ 比较运算符、布尔运算符、位运算符 小括号、逗号、void |
| 运算符优先级、数字、字符串、数组、对象 |
运算符结合性与优先级
数字的日常用法字符串声明方式 字符串访问和拼接 字符串查找和截取 数组定义、访问、长度 对象基础 |
| 流程控制语句、函数、箭头函数 |
if、switch、for、for-in、for-of、continue和break 函数、函数声明、参数、返回值 箭头函数 统计字符串字符个数、二进制转十进制 随机IP、随机颜色、打印杨辉三角 |
| 引用类型、块级作用域、var let const、词法作用域、作用域链 |
引用类型与案例分析 块级作用域案例分析 var、let、const区别 var声明前置 function声明前置 词法作用域 作用域链与案例 作用域、声明前置、TDZ案例 |
| 数组API和案例 |
数组push、pop、shift、unshift 数组splice、concat、join 数组sort、reverse forEach、map、filter、reduce、every、some 讲解和练习 类数组对象、数组转换、空数组 数组去重的几种方法 |
| Set、Map、WeakMap、正则表达式 |
Symbol的使用 Set的用法、Set实现数组去重 Map的用法 WeakMap介绍 正则表达式作用、创建、用法 判断输入的是否是有效手机号 贪婪模式和非贪婪模式 正则分组实例 |
| DOM详解 |
DOM获取元素、遍历元素、DOM元素属性 事件绑定 DOM创建和追加
关于createDocumentFragment的测试 DOM移动、替换、删除、DOM交换
DOM属性操作 style操作、class操作 实战练习：实现选项卡 |
| JavaScript事件流机制 |
事件范例、事件绑定两种方式 this与事件对象 JavaScript事件流、addEventListener详细用法 事件冒泡、阻止默认事件、事件代理 实战：实现简易todo 使用事件代理优化 |
| 更多事件类型 |
click、dblclick、mousedown、mouseup、contextmenu mouseenter和mouseleave keyup、keydown 实站：实现一个安全键盘 change、input事件 submit事件 cut©&paste DOMContentLoaded、load |
| 浏览器加载机制 |
从URL输入到页面展现 重绘和回流 JavaScript的加载 CSS的加载 白屏与FOUC 异步加载async与defer的区别 域名、DNS、服务器的关系 |
| BOM(navigator、history、localStorage、cookie、session、session storage、jwt |
navigator、history api
pushState、repalceState、onpopstate实现单页
localStorage的特点和用法，给localStorage设置过期时间 session storage cookie的特点和用法 session机制 jwt原理 |
| JS项目实战 | 完整的项目实战 |
| JS 世界观之内存图 |
内存使用规则 内存分区Stack和Heap 重新认识 window 对象 对象的共有属性 原型链 画出JS世界 对象与函数 |
|
内存图 2 之 Call Stack |
函数与函数调用的区别 Call Stack 是什么 如何让 Stack 溢出 作用域与闭包 |
| 构造函数与类 |
自制一个构造函数 隐藏属性和共有属性 构造函数标准写法箭头函数不能当构造函数 class语法 |
| 如何封装一个库 |
闭包的作用解构赋值介绍
用闭包实现 jQuery 用构造函数和类实现 jQuerywindow和Window的区别 class的限制 this与5种函数调用形式、this的面试题、this与箭头函数、函数重载 |
| 封装实战 |
MDN文档有多好用 Date API 实现 time.prototype.parts 实现 time.prototype.add 实战：判断闰年、取当月最后一天、实现格式化输出 |
| 任务队列与微任务队列 |
新的调试方式 不靠谱的 setTimeout 内存图之任务队列 微任务队列 |
| server.js 与 AJAX |
Nodejs开发第一个server 用server.js创建网站
AJAX 封装 AJAX |
| 回调与异步 |
同步地摇色子、异步地摇色子 什么是异步、轮询与回调 什么是回调地狱 Node风格的回调 |
| 请求、响应、Cookie、跨域 |
请求是什么、响应是什么 wireshark抓包演示 Cookie与Session 同源策略 跨域之CORS JSON是什么 跨域之JSONP
跨域之反向代理 |
| EventEmitter 与 Promise |
实现发布订阅
Promise介绍 Promise API Promise的实现 |
| Axios 与 Mock |
新的调试方式：Vite 安装Axios 如何Mock 如何查看Axios英文文档 Axios使用方法 |
| 面试题精讲 |
面试策略 setTimeout面试题 call、apply、bind面试题 this面试题 闭包面试题 其它面试题 |
| ES 6 语法汇总 |
ES5新特性汇 ES6新特性 ES7新特性 ES8之async和await ES9、10、11在哪看 |
| JS 模块化概论 |
代码组织方法一：注释 代码组织方法二：函数 代码组织方法三：命名空间 代码组织方法四：立即执行函数 代码组织方法五：CommonJS 代码组织方法六：AMD 代码组织方法七：ESM |
| Webpack 的使用 |
模块化的后遗症 为什么选 Webpack
watch命令：边开发边预览 server命令：自动开启服务器 开发模式和生产模式 配置htmlWebpackPlugin 如何安装依赖 如何引入CSS 插件：CSS单独打包 如何引入图片 按需加载，打包成两个JS
如何看Webpack文档 |
| 脚手架的使用 |
使用vue-cli babel是什么 typescript是什么 SCSS是什么 eslint是什么
CRA的使用 Vite的使用 |
| MVC架构模式 |
用对象组织代码 update与重新绑定事件 用Class组织代码 合并render和bindEvents 引入模板引擎、封装 events、使用继承 MVC架构模式、model、view、controller model与发布订阅、让model继承eventEmiter、使用 class 实现继承
|
| Vue、React项目选择 |
Vue路线主要内容 React路线主要内容 如何选课程项目 |
|
项目实践 (1~2个月) |
✦ 个性化定制项目，让学生的项目不再千篇一律； |
| Vue2 开发印象云笔记 |
Vue2、Vue
CLI、ElementUI、Axios、Vuex、Vue
Router |
|
Vue2 商城 |
Vue2、Vue CLI、Axios、Vuex、Vue Router |
|
Vue2 多人共享博客 |
Vue2、Vue CLI、ElementUI、Axios、Vuex、Vue Router |
|
Vue2 移动端手帐 |
Vue 2 + TypeScript + Vue Router + Vuex |
|
造Vue2 UI 组件库和官网 |
Vue、Sketch、单元测试Mocha&Chai、自动化测试Karma、持续集成TravisCI |
|
翻译小程序 |
原生微信小程序 |
|
Uniapp抽奖小程序 |
Vue、Uniapp |
|
造Vue3 UI组件库和官网 |
Vue3、Vite、TypeScript、VueRouter4 |
|
Vue3 山竹记账 |
Vite、Vue3、TypeScript、Pinia、JWT、VantUI、TSX、VueRouter4、Axios... |
|
React 山竹手帐 |
React18、React Router6、ESLint、TypeScript、Zustand.js、Axios、JWT、SWR... |
|
React 大屏可视化 |
React、Echart.js |
|
React UI组件库 |
React、Webpack、TypeScript |
|
原生项目 |
原生造轮子系列，如 造简易React 造简易ReactHooks 造简易Redux 造简易Vue 造JQuery 造Express.js 造符合Promise A+规范的Promise 造手势库 造模块加载器、打包器等等 原生应用类项目，如 音乐播放器 在线Markdown转PPT平台 个人导航站等等 |
04 / 关于老师
饥人谷 CTO，在谷里主导在线教育平台和 Saas 系统冰草约课的开发，华中科技大学毕业，10 年编程经验，之前在腾讯阿里工作。在知乎和 b 站有数万粉丝。做讲师带过的学生数千人，去大厂的也不计其数。不是大厂学生做过直播分享经验，直播录屏在饥人谷官网或者b站查看。
05 / 课程保障？
06 / 费用&咨询联系
07 / 这些问题您可能关心
问
饥人谷有往期数据吗？
问
和其他机构相比你们有什么特色？
问
选择线上还是线下？