前端开发学习流程

掌握一个好的学习方法可以让学习事半功倍，今天我就给大家介绍一个，经过无数小伙伴验证，无比顺滑的前端开发学习路径。

学习流程可以分为两个层级，第一层级完成之后，在校学生可以初步达到找实习工作的要求。如果是社招，那么还需要完成第二个层级的学习，才能达到就业水平。

下面我会详细介绍一下两个层级的详细学习流程，以及每一个阶段要达到的目标，走起~

第一层：基础知识

第一步：html与css基础

html与css是前端最基础的技能，这个阶段大家要达到可以独立还原设计稿的能力。不管是电脑端的设计稿，还是手机端的设计稿，或者是已经上线的成品页面，只要看到效果，就能知道通过什么样的页面布局可以达到这个效果。

这个是前端工程师的基本功，后面我们要学习的大部分内容，也都是需要这个基本功来支撑的。不过本阶段难度并不高，大家只要真正动手完成两张设计稿即可（一张电脑端，一张手机端）。

第二步：JavaScript基础

JavaScript是前端的根基，要想在前端的道路上走得更远，必须要有一个坚实的JavaScript基础，但是这也导致好多学习中的小伙伴卡在了这个学习阶段。其实初学前端，JavaScript并不需要掌握得太深，够用就行。

数据类型、变量、控制流程、内置对象、DOM基础、BOM基础，了解这些知识时候，再做一些简单的网页效果，例如轮播图，选项卡之类的功能，就够用了。

像内存机制，闭包，作用域链，原型等等这些，对于初学者一听就头大的知识点，完全可以放在第二层级来学习，因为这部分内容会与不会，是不影响大家做项目的。

第三步：Node与npm

有了第一步和第二步的基础，小伙伴们的知识体系开始逐渐形成，当前，我们的目标只有一个，那就是独立完成项目。与这个目标不搭边的知识点，全都放到第二个层级去学习。

所以在这里，对于Node有一个简单的了解就可以了，npm可以使用常用命令即可。

第四步：Vue或React

Vue和React如何选择，其实区别不大，掌握了一个，再去学第二个就很容易了，如果有选择恐惧症，那么掏出一枚硬币，正面学习Vue，背面学习React就可以了。关于vue和react的称呼，以下我们都叫它MVVM框架

线上其实有很多教程，除了讲解MVVM框架的使用方法，还会讲解【双向数据绑定原理】【虚拟DOM与diff算法】等等进阶的知识点，弄得小伙伴们痛不欲生，其实学习初期，这些是可以完全不学的，本着我们上一步的原则，一切学习都以独立完成项目为目标。

所以在这个阶段，掌握MVVM的基础语法，了解如何操作文本和属性，了解如何绑定事件，如何控制列表和条件，基本上就够用了，如果在开发项目的过程中遇到一些不会的知识，回头再补齐就行。

第五步：前后端数据交互

在这一阶段，大家要开始接触后台的知识了，因为我们的实训项目肯定是需要有后台的，所以我建议大家可以用node，或Koa，再或是用基于koa的Egg框架搭建一个web服务器。然后用MVVM框架结合axios去实现前后台数据的交互。

第六步：项目实践

最后一步就是利用前五步学习的知识独立完成一个项目，项目可以是一个个人博客，或者是一个内容管理系统（CMS），也可以是其他的一些自己感兴趣的项目，不管怎样，项目完成度一定要高，面试的时候，这个项目是可以展示给别人看的。

通过上面六步，我们的第一层级学习任务就完成，然后便可以开始进入第二层级的学习。

第二层级

第一步：JavaScript语法进阶

在第二层级，我们不只要实现功能，还要知道功能为什么能被实现，所以，在第一层级中我们提到的JavaScript内存机制，闭包，作用域链，原型等等这些概念，到现在这个阶段应该开始着手学习了。

除了上述语法特性，ES2015新增的语法特性也需要掌握，比如什么时候使用let，什么时候使用const，结构赋值，箭头函数与普通函数的区别，都要深入理解。Promise对象，Async函数这些解决异步问题的方案要懂。Set，Map这些新增的数据结构也要会用，所有的语法特性，都要系统的过一遍，千万不要在面试题的时候，别人说了一个自己完全没有听过的概念，那就尴尬了。

第二步：MVVM框架原理

同样，MVVM框架在这个阶段也不能仅仅停留在会用的段，数据的双向绑定原理，虚拟DOM与diff算法，为什么循环要加key，生命周期的详细过程，watch与computed的区别，等等这些都是面试极容易问的问题。一定都要掌握了才行。

第三步：横向扩展技能树

各种小程序，uniapp，react-native，flutter，还有层出不穷的新技术，这些都要适当地去了解，不一定都要会用，但是最起码要知道他们都是干嘛的，都解决了什么问题。

第四步：数据结构与算法

这里主要针对的是跨专业的小伙伴，因为计算机专业的小伙伴们在学校一定会学习数据结构与算法的课程，对于【时间复杂度】【空间复杂度】【栈】【队列】【树】【图】，还有常见的【排序算法】和【查找算法】肯定是有一定理解的。但是对于跨专业的小伙伴，上面的内容可能完全不理解，甚至都没有听说过，所以，如果是为了在激烈的社招竞争中找到一份适合自己的工作，上面用方括号列举的内容，还是要补一补的。

写在最后

感谢大家的支持与关注，我的公众号【程序员晓舟】会更新更多干货内容，敬请关注哟！