我是怎么学前端的

前言
从大三（三年前了吧）开始学的前端，市面上各类视频，收费，免费，正版，盗版的都看过，平台看极客学院，慕课网，腾讯课堂。后来出国了，就看 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》。
.google  и

关于这类视频不要太要求质量，因为讲得都是很基础的，学完不会的可以回家种田了。看完你只需要
1. 知道 XXXX 是什么
2. XXX 有哪些语法
3. 如果他有小实例那更好，你就是打字员，跟着敲就行了，别问那么多为什么，因为你还是个菜鸟，问了你也不懂。不信可以从“如何学习前端”这个问题DFS下去，看看你能搜出多少名词？
4. 视频最好要短，短到一天我就了解了所有东西，因为你的时间应该放在后面的项目上，而不是这些概念

这里可以稍微记一下笔记，但是不要写得特别全，以截图，代码和一两句话为主。我附一些我在这个阶段学一些东西的笔记。


2. 使用基本概念
这个阶段可以和上面结合，一般视频介绍基本概念也会让你写点简单的 hello world 代码。一般是够用的。


如果你觉得不够的话可以用新学的编程语言 去写写 leetcode，就写最最最简单的

多写几次，基本语法啥的就会了，别去记，因为你记不住。

3. 项目视频
.--可能这个阶段是最多人比较困惑的点，当然我也曾经这里的一员。处在这个阶段，感觉自己懂了一点，就想秒天秒地秒宇宙了，觉得只要我看个项目视频我就可以搞个类似的。要不是就是想看完这个视频我就有东西写在简历上了。所以在这个阶段的人会去找一些大而全的视频，比如《XXX商城》，《写个Facebook》，《XXX+YYY+ZZZ+AA+BB 完成新浪》。


不要去选这种做大而全，复杂的项目视频，下面是我的观点：

• 那些你看起来的复杂项目，并不复杂，而是很无聊的项目。为什么？你想想复杂的定义是什么。那不就一个页面写成一千个页面，一个组件写一千个组件呗。那还不如写好一个页面，一个组件，慢慢 follow up。
• 上面已经说了写一个千个页面其实很无聊，所以我敢保证你看完写第二个页面的时候，你就没有看下去的欲望了。你会觉得不就是增，删，改，查么。
• 就算你真的写完整个项目，你会更迷茫：写了个复杂的商城，别人让你再写一个感觉很虚。这里最大的问题就是你并不清楚学习重点是什么。JS的 class，async/await，原型链，React 的受控和非受控，redux 原理，你会了多少呢？
  

说了那么多，哪种项目比较适合你的第一个项目呢？我比较推荐 Todo App/记账App。你可能会觉得惊讶，就这？？？？下面是我的观点：

1. 页面不多，想都想得到：查看 todo 页面，登录，个人页
2. 资源不多，只有 todo，就是对基增，删，改，查
3. 有着大项目的特点：登录，资源管理。你觉得简单，那你下个 split-wise，自己实现一下
4. 可拓展：
  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/](http://todomvc.com/)，Vue，React，Angular 都实现一下？
5. 省时间：有更多的时候去思考，比如，为什么要 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


简书项目好像被我删了。。。


.1point3acres如果抄不了网站就抄小组件，像这些

如果想练 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等等，所以，你还应该要去对比这些东西，从根本去理解这些所谓的“技术”，“术语”。

这方面博客是比较多的，这里比较推荐掘金上面的博客比较小白，但是讲某个技术是比较全的。英文的可以看 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，如果你喜欢前端并坚持下去的话，我会在路上等你❤️

Byewine 发表于 2020/05/14 20:35:05
更关心楼主为啥打算做fronted哈哈哈，感觉大家都集中在后端

可能就是很喜欢吧，当然现在也很想了解后端的一些解决方案。程序员嘛，没有必要用前端/后端给自己定标签，只能说写码的路上，我的第一站是前端，而他们的第一站是后端。这样理解是不是就不纠结了呢？

前段没基础直接撸Angular，公司项目，还一开始开始实习就是远程工作，前期差点吐。
楼主说的很多，视频只是快速有个基本了解，降低直接撸的痛苦，真想学会，还是练手。
要想学好，最好也快速过一下好的课程，然后多练几个项目。

谢谢分享！

本文被选为全站置顶文章之一。
作者获得大米奖励。谢谢你的分享。

谢谢 LZ 分享

LZ 可不可以分享一下对 React / Angular / Vue 的想法？

帮 LZ 加大米，也求大米

虽然没有看完，但是作者这么拼我也得给米了

alexwcy 发表于 2020-5-14 12:49
谢谢 LZ 分享

LZ 可不可以分享一下对 React / Angular / Vue 的想法？

Angular 写得不算多，以后有机会可以写一下

楼主威武，干货分享！

楼主看书了吗？可以把自己看的书的目录列出来吗？

九妹Rita 发表于 2020-5-14 14:36
楼主看书了吗？可以把自己看的书的目录列出来吗？

以前看（且看完）的都是一些比较经典的书，有《JavaScript DOM编程艺术》《JavsScript高级程序设计》《高性能JavaScript》《JavaScript语法精粹》《ES 6标准入门（第2版）》。虽然看了，但是并不推荐学习前端的时候看。因为都太老了，跟不上时代了，而且效率并不高。

楼主能不能总结一个北美前端方面的面试经验，关于前端方面的面经比较少

刚刚开始学前端的路过，看到第三点第四点基本就感觉开始飘了hhhh。还是从1、2开始吧