做前端，看完这篇文章你也可以做到
如果你是以下几个类型的学生，这篇文章一定要看！
从零开始小学生：怀着满腔的热血，看到了这一个行业的希望和未来，准备开始学习 Web 开发知识。先通过 w3cschool 等免费学习资源把 HTML、CSS 和 JavaScript 的基本操作学会了写一个简单的表白页面送给你的女/男朋友，展示一下自己努力的成果，如果没有就当我没说
懵懵懂懂初学者：懂得如何使用 HTML、CSS 和 JavaScript 三大件来实现基本页面开发功能选择一个可以覆盖多种场景、可以随自己意愿调整难度的项目尝试实现，如博客系统、记账本、Markdown 编辑器等从 React 和 Vue 这两个框架中选择一个进行学习
轻车熟路新玩家：懂得使用框架来实现上面所举例项目学习 Redux、Vuex 或者 MobX 等状态管理工具，并将他们使用到前面的项目中思考状态管理工具为你的项目带来了什么好处
初出茅庐新司机： 懂得如何使用脚手架创建项目，并且能将代码结构根据模块化的思想进行安排学习 TypeScript，对前面的项目进行重写，注重对数据结构和类型的控制学习 Node.js，试着配合数据库实现一个比博客系统更为复杂的 CMS（内容管理系统），如 图书馆管理系统、仓库管理系统
基本上手好司机：如果是懂得如何利用 Node.js 或 TypeScript 编写业务代码的思考在前面使用框架开发的项目中，有哪些代码是重复冗余的，有哪些逻辑是可以在多个组件之间共用的学习利用 ES2015 或更新的 JavaScript 标准，逐步替换使用框架所编写的代码
淡定自然老司机：如果是对逻辑抽象、模块封装有了一定的理解和经验的思考如何使用纯 JavaScript 对业务组件中的非渲染、非 DOM 相关代码进行抽象引入单元测试工具，对纯逻辑代码进行测试，争取覆盖率达到 80% 以上
赛道新手初学者：如果上面的条件你都已经满足了 思考不同的代码哲学（OO、FP 等）、不同的代码结构（MVC、MVVM 等）的区别思考不同的框架之间设计的初衷，思考不同的编程语言中对同一类问题不同解法的区别。
如何看源码新人刚开始看源码，会陷入两个困境中。一是无从下手。二是看了之后感觉没啥收获。这个也很正常。一般我们熟知的框架都有个几千甚至上万个PR。太大细节会干扰你。掌握整个节奏和流程。学习原理也比较吃力。就连找个入口都像大海捞针一样。
建议从下面几个方面入手：挑简单的上手。别一开始就搞 vue、react、webpack。太难，会直接劝退新人。不要为了面试而去读。反而效果不好，面试稍微问深入一点就答不出来了。平时有兴趣多琢磨琢磨。按照难易程度，函数库 < 组件库 < 框架 < 工程化 分别典型代表 lodash < vant < vue < webpack手撸简易模型。
像vue, webpack, babel 都有简易项目给你做。有的创始人（尤哥）还直播如何做。国外的更多，youtube 一搜一大堆。就算不看源码，照着写出了简易 demo 对原理和理解提升都是很大的。调试开源项目。先把项目拉下来。在vscode里面跑下，核心函数多打几个断点。看看里面变量是怎么diff的。重点搞下babel、webpack。
学习下编译，打包的原理。自己配置下 webpack。尝试自己去写下下 webpack 的 loader 和 plugin。学习这些之前要懂一点 node.js， node.js 不需要全部学习。一般就日常用到读写文件fs接口，path 路径接口。这些 api 都不难写几个 demo 就懂了。基本上webpack 里面配置文件也没用到多少 node 的东西。最后自己学会配置webpack的配置文件。如果想深想去优化打包体积和速度，就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。当然前端工程化不仅仅是这些，CI/CD可持续集成, Umi 了解下。shell各种脚本自动化命令、代码生成技术了解下。
学习吃力的原因肯定是学习方法不太正确。总结下一般怎么才能真正学到东西详略得当：前端知识太多，抓重点学，不要像背字典一样。不要急着写代码，先理清流程（以一个函数为单位，可以先写注释）再写代码。看视频看讲解是会误以为自己会了，其实并没有。学会总结：一句话可以讲清楚的事情，不要多说一句。
减少心智负担。不介意复制代码，但是要知道这个代码里面大致实现原理。感兴趣自己重写一个。较大的项目，不要急着看代码。可以先把项目跑起来。通过改代码里面的参数来理解里面的核心流程。demo 式编程。 对于新框架，参考demo来上手更快更容易理解。渐进式编程。对于比较复杂的功能/需求。不要想着一气呵成。先实现一个核心，每次往上面加细节，有点像绘画。断点单步调试很有用，定位bug会更快。
当然有些不易调试的应用选择打log。一次打 log 要多打点，免得打完log,有得再加。黑盒太多的项目，实在找不到bug原因。发给同事帮忙看。可能很快就能看出来。当局者迷，旁观者清。(很多时候是拼写的问题).