前言
从大三（三年前了吧）开始学的前端，市面上各类视频，收费，免费，正版，盗版的都看过，平台看极客学院，慕课网，腾讯课堂。后来出国了，就看 YouTube，Udemy 啥的。看了这么多的学习视频也有点心得，今天又是被困在美国的一天，就总结一下吧。
学习过程
很多人其实很想通过看视频去学习某个技术，但是看完就跟没看一样。好像自己学了一点东西，但是用起来又不会用，打击感很大。那我们不妨说一说比较良性的学习过程，因为你得知道你为什么要看学习视频，到底看了视频要学哪些东西。
我总结自己的学习过程是这样的
- 看视频学最基本的概念，如 API 使用，语法（if-else, for, while, class），IDE 怎么用，（npm, node，React...）是什么。
- 熟悉语法，将上面学到的东西用一用。比如用 Pyhon/Java/Go/Ruby 写写 leetcode。
- 跟别人的视频做第一个项目。比如写个小商城，小记账应用。
- 模仿市面上的项目，见一个抄一个。前面觉得自己学得不错的可以抄网站，比如抄个知乎，抄个简书，再不行抄个学校网页总行吧。觉得还有很多不了解的，就抄组件，如登录表单，表单验证，按钮等。
- 深入技术，思考，总结。比如为什么要有XX，XX怎么来的，为什么用 XX不用YY。
- 创新，解决生活问题，写轮子。
- 纵向/横向发展，比如软件工程，每个步骤了解一下。
- 自我感觉我还没到这个层次。。。
呼，7个学习层次总算写完了，是不是感觉很多？很难呢？没错，学习就是这么的难。不要那么多浮躁，总想一步登天。
从上面的学习过程，也可以看出看视频只是在前期占比较重要的位置，在后期个人发展占的地位并不多。所以看视频仅仅是为了让你去快速了解某个事物，并不能让你提升很多，关键还是在于自己多练习和创新。
学习平台
在分层去讨论前想先说说学习平台。对比一个国内和国外的两个平台。
视频
- 国外：一般都是很入门的，比较喜欢拉长每个知识点，你看的时候总把你当三岁小孩，但是体验很好，声音，视频质量都是很好的。
- 国内：参差不齐，体验一般，看到还用 windows xp 系统讲课的都吐了，命令行还是白底黑字的都是垃圾。但是毕竟说国语，至少让你注意力比较集中，还有一个好处是，如果遇到比较操蛋，喜欢说骚话的老师，你的学习效率会直线上升，嘿嘿嘿。
博客
- StackOverflow: 一般查 problem
- Medium: 一般学一些基础用法和概念
- 掘金: 小白东西比较多，但是阐述的概念会很全
- 简书，知乎：解决问题为主，主要为了好看
- 博客园：垃圾
总结一下，两边的平台都是有好资源的，不过国外的普遍好一点，国内要是好的话就特别好。所以为什么中国工程师一定比国外牛逼呢？就是因为我们有两个学习平台呀。
下面就分层去讨论吧。
1. 基本概念
这里可以看一些很基础入门的视频，标题如《三天学会 XXX》，《零基础学XXX》，《XXX Tutorial》，《XXXX Beginner》。
各种入门
更多入门
关于这类视频不要太要求质量，因为讲得都是很基础的，学完不会的可以回家种田了。看完你只需要
1. 知道 XXXX 是什么
2. XXX 有哪些语法
3. 如果他有小实例那更好，你就是打字员，跟着敲就行了，别问那么多为什么，因为你还是个菜鸟，问了你也不懂。不信可以从“如何学习前端”这个问题DFS下去，看看你能搜出多少名词？
4. 视频最好要短，短到一天我就了解了所有东西，因为你的时间应该放在后面的项目上，而不是这些概念
这里可以稍微记一下笔记，但是不要写得特别全，以截图，代码和一两句话为主。我附一些我在这个阶段学一些东西的笔记。
学习 TypeScript
学习 Sketch
别总想记成高考那样的笔记，密密麻麻的，没啥用，笔记的目的是为了让自己一看就知道那时发生了什么，不了会了供起来的。后面有的是时间让你写密密麻麻的博客。
2. 使用基本概念
这个阶段可以和上面结合，一般视频介绍基本概念也会让你写点简单的 hello world 代码。一般是够用的。
如果你觉得不够的话可以用新学的编程语言 去写写 leetcode，就写最最最简单的，比如这种
当时转 Python 写的
多写几次，基本语法啥的就会了，别去记，因为你记不住。
3. 项目视频
可能这个阶段是最多人比较困惑的点，当然我也曾经这里的一员。处在这个阶段，感觉自己懂了一点，就想秒天秒地秒宇宙了，觉得只要我看个项目视频我就可以搞个类似的。要不是就是想看完这个视频我就有东西写在简历上了。所以在这个阶段的人会去找一些大而全的视频，比如《XXX商城》，《写个Facebook》，《XXX+YYY+ZZZ+AA+BB 完成新浪》。
不要去选这种做大而全，复杂的项目视频，下面是我的观点：
- 那些你看起来的复杂项目，并不复杂，而是很无聊的项目。为什么？你想想复杂的定义是什么。那不就一个页面写成一千个页面，一个组件写一千个组件呗。那还不如写好一个页面，一个组件，慢慢 follow up。
- 上面已经说了写一个千个页面其实很无聊，所以我敢保证你看完写第二个页面的时候，你就没有看下去的欲望了。你会觉得不就是增，删，改，查么。
- 就算你真的写完整个项目，你会更迷茫：写了个复杂的商城，别人让你再写一个感觉很虚。这里最大的问题就是你并不清楚学习重点是什么。JS的 class，async/await，原型链，React 的受控和非受控，redux 原理，你会了多少呢？
说了那么多，哪种项目比较适合你的第一个项目呢？我比较推荐 Todo App/记账App。你可能会觉得惊讶，就这？？？？下面是我的观点：
- 页面不多，想都想得到：查看 todo 页面，登录，个人页
- 资源不多，只有 todo，就是对基增，删，改，查
- 有着大项目的特点：登录，资源管理。你觉得简单，那你下个 split-wise，自己实现一下
- 可拓展：
4.1 登录：JWT？refresh token？权限管理？邮箱注册？密码加密？OAuth？reCaptcha？验证码？你都想到了多少？
4.2 资源：可参考 App Store 上的 App，添加分组, 图片，图表，notification, tag。资源的关系，单单统计这块的 sql 就够你想的了，想好了再做个可视化呗。
4.3 样式：再参考 App Store 上的 App，做个一模一样的。做完再做个响应式的，mobile 和 PC 都适用的样式，PWA 了解一下？
4.3 纵向：Sketch 设计？Figma？Webpack打包？Jest 单元测试？Cypress 集成测试？Travis CI？Coverallas？HTTPS？AWS部署？MySQL？Mock Server？Logger？SSR？你又想到了多少呢？
4.4 横向：如果上面你都挑战成功，那么试试 TODO MVC 吧：http://todomvc.com/，Vue，React，Angular 都实现一下？ - 省时间：有更多的时候去思考，比如，为什么要 Redux，Redux 到底怎么来的，为什么要前端去实现 Router，后端实现 Router 不行么？LocalStorage 和 cookie 存用户信息？MySQL 要怎么设计？思考好了，写篇博客吧。如果你写商城，我相信你是只会疲于追赶课程的进度，真的只是做个打字员，没时间去思考，总结，写博客。
当然这个阶段的目的是为了让你起步第一个项目，而不是去完成我上面说的。这里只想说一个简单项目已经够用了，尽量去减法。所以一个 Todo App/记账 App 绝对是够你用已有的基础去起步你的第一个项目的。
另一个目的是起步你的第一篇博客，当你写完一个 todo list 相信是有很多体会的，此时可以写一些很烂的博客，比如 JS class 怎么用，JS 闭包是什么。你别觉得自己不行，或者看不起这些很烂的博客，博客只有写多了才会深入浅出，这个阶段你还没深入，所以只能浅入浅出。
这算是我第一个比较“成功”的项目了https://yanhaixiang.com/yan-xuan/#/home/recommend，样式还可以，但是可以看出有特别多的问题，代码写的也很乱，没有后端，只有前端的 Mock Data。
这是我很久之前写的一篇博客https://www.jianshu.com/p/e0941d5cc7ac，就是那么的小白，图片，思路也不那么好。
4. 抄
这个阶段就一个字——抄。抄知乎，抄简书，抄 github。反正你看到什么就抄什么。抄到吐为止。我以前抄过简书，有谱么，和严选。
有谱么：
https://haixiang6123.github.io/guitar-editor/#/
严选：
https://yanhaixiang.com/yan-xuan/#/home/recommend
简书项目好像被我删了。。。
如果抄不了网站就抄小组件，像这些
Google 按钮
Windows 磁贴
如果想练 Node.js，那么用 JS 去实现 cp, ls, mv 这些命令吧。当然我也写了一个这样的 repo，只是后面又被我删了。。。不过我特别喜欢命令行工具，所以也有这个项目https://github.com/Haixiang6123/awesome-cli。
如果觉得自己很彳亍，那么打开 https://dribbble.com/，上面的设计都挺好看，也很炫，抄吧。
5. 总结你的知识
抄了那么多网站，也会学到很多小 tricks，如7种居中方法，如何拖拽组件，css 的定位等等。这个时候我觉得最好可以看一些比较宏观，或者专精某个技术的视频，如《XXX新特性》，《XXX最佳实践》，《XXX发展史》。
此时你还会接触到很多相似的工具或解决方案，如 Glup vs Grunt vs Webpack vs Parcel，Vue vs React vs Angular，this.$refs vs document.getElementById vs document.querySelector，text-align vs flex等等，所以，你还应该要去对比这些东西，从根本去理解这些所谓的“技术”，“术语”。
Why react hooks
这方面博客是比较多的，这里比较推荐 掘金 上面的博客比较小白，但是讲某个技术是比较全的。英文的可以看 Medium。
YouTube 可以搜 《why XXX》，《XXX vs YYY》等。其实此时视频对你来说帮助并不大，因为很少视频会讲很深入的。。。一般视频还是偏向给小白看的。
当然看视频，博客只是学习手段，只有写博客才能让自己真正去掌握一门知识，所以，这时候就是你写密密麻麻“笔记”的时候了，请开始你的表演。
6. 创新
曾经很多人问我要去哪里找好项目做，我说去解决生活的问题呀，这就是创新。这里创新并不让你搞一些“新”东西来，而是用代码去解决生活上的问题，当然新东西是锦上添花。
做创新项目的目的应该是这样，如果你的实力有 60 分就去做 70 分的创新项目，而做完这个创新的项目，你的学习能力应该是达到 80 分的。。比如你学了爬虫，那就爬一下学校的课表；学了 CSS 就用 CSS 画个皮卡丘。不要总想着我学了 JS，直接写刷票软件，这是个好的创新，但是与你实力不符。
但是看到这里的你也知道创新这一步是多么的靠后，创新不仅仅需要技术的积累，也需要你对技术的熟练，熟练到一想到需求就有个大概框架的程度。实现项目不过是找资源和花时间去写代码。
当然，在生活中也要多用编程的思维去想问题，不要觉得很 nerd，我觉得这是一件很 cool 的事。如果别人觉得很 nerd，那就问他只会写 leetcode 除了面试有什么用。只要你用这种思路去想的话，遍地都是可以写的项目。比如知乎这么多广告，怎么一键去广告？一亩三分地每次都登录，怎么自己起服务器去自动签到？学校的课程这么乱，能不能自己实现一个国外版的超级课程表？
你看，这些都是你每天遇到的问题，但是你选择了吐槽，而不是去解决它。
7. 纵向/横向发展
纵向发展的话就是将你的小项目做大，比如个人网站，你的第一个项目，完完全全去跟着软件工程（需求 -> 设计 -> 代码 -> 测试 -> 部署/发布）这一套搞下来。会再次发现自己的渺小，东西多得学不完。
当然这里并不是先学再用，而是先用再学。要做的就是实现，不要管最佳实践。如果非要去学的话，上面每个步骤可以再次参照我的 7 步学习思路，从第一步入门即可。
横向发展暂时我还没有时间开始，所以这里就不说了。
8. 未知
等你们在评论里说吧。。。
最后总结
可以看到真正去学习一门技术是多么的费时间和费精力，绝对不是网上的3天入门，或者看个视频就可以速成的。一定是经过：入门 -> （重复 -> 总结 ）X3 -> 创新 -> 扩展。
所以，当你觉得学不下去都是很正常的，我也经常会放弃。放弃了 Go，放弃了 ruby on rails，放弃了 Flutter，放弃了 angular，放弃了 Django，放弃了 Spring。。。但是，我对于前端还是一如既往的热爱，会在这方面去深耕，和分享。
Anyway，如果你喜欢前端并坚持下去的话，我会在路上等你❤️
网友评论