如何系统的学习前端_如何学习前端知识

目录

1.新手入门阶段

2.技术突破阶段

1、 制定好一下系统的web前端学习规划

2、 老师很重要

3、 机会都是留给有准备的人

4、 多接触项目

5、 培养独立解决问题的能力

6. 掌握得当的学习方法

---

其实不论是小白程序员还是有了工作经验的成熟程序员，不同阶段的人对前端学习和职业发展总有自己的迷茫，简单汇总了下，发现大家出现的问题主要是 3 种：

1、行业竞争变大，初级前端工程师泛滥，发展预冷；

2、部分有技术追求和热情的中级工程师，工作了几年也开始接触管理岗，但做了才发现，技术积累不够，不仅跟不上节奏，在工作中只能是被动地接受需求解决问题；

3、还有一些人，在 React、Vue 和 Angular 这些框架，以及 Flutter、Weex 等跨平台开发工具中焦虑着，前端技术层出不穷，感觉学不动了啊，咋整？

别焦虑，今天千锋广州小编就来给大家系统的分析讲一下如何系统的学习前端。

1.新手入门阶段

前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。只要你认真学，入门前端的话三个月左右就可以了。

首先是 0 基础入门的同学，你可以读几本经典的前端教材，比如《JavaScript 高级程序设计》、《精通 CSS》等书籍，去阅读一些参考性质的网站也是不错的选项，比如 MDN 。

入门前端开发主要需要学习 HTML，CSS 和 JavaScript 三大件。之后学习前端主流框架的使用，并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后，也就算真正地入门前端了。

学完前端三大件，打好了大树的根基，就可以开始扩展技能树了，开始学习前端框架。

前端的主流框架目前主要为 React，Vue 和 Angular。选择哪个框架呢？你可以去Github或者其他网站搜一搜，然后根据你的个人喜好进行选择。一般是在 React 和 Vue 中选一个。

React 的开发体验更类似于写原生的 JavaScript，要求你有较好的JavaScript 基础。Vue 则引入了模版，将很多实现封装成了 API，你需要记住并调用 API 来进行开发，因为很多都是封装好的，所以学习起来较为简单，只是编程的感觉稍微弱了一些。

这两个都是非常优秀的框架，新人不必纠结于选择哪个框架，学了一个，另一个也很容易学。

2.技术突破阶段

如果你至少已经有了一年以上的工作经验，希望在技术上有一定突破，那么在这个阶段小编将具体给你几点建议：

试着建立自己的知识架构

建立自己的知识架构，并且在这个架构上，不断地进行优化。

什么叫做知识架构？我们可以把它理解为知识的“目录”或者索引，它能够帮助我们把零散的知识组织起来，也能够帮助我们发现一些知识上的盲区。当然，知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。

对学习知识体系的态度，应该不要去强求，而是去理解知识体系的完整性和框架，多面，多维度，多方面的去累积来补足，补全自己的知识体系。

以javascript为例，我们可以将它分成三个层级：

1、 文法： 分为词法和语法

2、 语义

3、 运行时： 分为类型和执行过程

为什么这么划分？以计算机语言来说，必定是“用规定的文法，去表达特定语义，最终操作运行时”的一个过程。

这里有三个名词：文法、语义、运行时。这三个词大部分同学都比较陌生，当然我也是。第一次接触到这些名词时，可以先在心里混个眼熟，下次在出现这些名词，就会有个印象。

当我们再往下细分的时候，就会看到熟悉的概念了，词法中有各种直接量、关键字、运算符，语法和语义则是表达式、语句、函数、对象、模块，类型则包含了对象、数字、字符串等。

这样逐层向下细分，知识框架就初见端倪了。在顶层和大结构上，我们通过逻辑来保持完备性。

如果继续往下，就需要一些技巧了，我们可以寻找一些线索。

比如在 JavaScript 标准中，有完整的文法定义，它是具有完备性的，所以我们可以根据它来完成，我们还可以根据语法去建立语义的知识架构。实际上，因为 JavaScript 有一份统一的标准，所以相对来说不太困难。

如果是浏览器中的 API，那就困难了，它们分布在 w3c 的各种标准当中，非常难找。但是我们要想找到一些具有完备性的线索，也不是没有办法。我喜欢的一个办法，就是用实际的代码去找：for in 遍历 window 的属性，再去找它的内容。

学习的过程，实际上就是知识架构不断进化的过程，通过知识架构的自然延伸，我们可以更轻松地记忆一些原本难以记住的点，还可以发现被忽视的知识盲点。

学会追本溯源，找到知识的源头

有一些知识，背后有一个很大的体系，例如，我们对比一下 CSS 里面的两个属性：opacity和display。

虽然都是“属性”，但是它们背后的知识量完全不同，opacity 是个非常单纯的数值，表达的意思也很清楚，而 display 的每一个取值背后都是一个不同的布局体系。我们要讲清楚display，就必须关注正常流（Normal Flow）、关注弹性布局系统以及 grid 这些内容。

还有一些知识，涉及的概念本身经历了各种变迁，变得非常复杂和有争议性，比如 MVC，从1979 年至今，概念变化非常大。这种时候，就是我们做一些考古工作的时候了：追本溯源——关注技术提出的背景，关注原始的论文或者文章，关注作者说的话。

追本溯源的过程，可以帮助我们理解一些看上去不合理的东西，还可以帮我们更好的理解前端开发的历史进程。

当然，学习这件事还是比较困难的，技术这个东西都是日积月累积累出来的，短期成就不了什么，你想要成为真正的web前端技术大牛，那你就应该“钻”进去。

如何深度学习，将前端学习路径贯穿我们的整个职业生涯？

1、 制定好一下系统的web前端学习规划

每天定量，学完什么知识点就掌握，能自己应用，而不是能看懂，写不出来东西。

2、 老师很重要

不要自己一个人闷头学，这样很难就业的，一定要找一个指导的，不一定推荐去培训，但是在线上花点钱找个能带你学习，帮你解答问题的老师是必要的，如果你舍不得花这个钱，就很难能够找到好的web前端工作。

3、 机会都是留给有准备的人

坚持每天学习也考验你的耐性和毅力，中途如果没有什么事情千万不能松懈，一天都不可以，保持一周6天的学习状态，周日可以休息一下。

4、 多接触项目

学这个就是为了做项目，学完了做不了项目的，趁早停止，技术的成长都是在项目中提升的，所以一定多接触项目。不要怕遇到问题，因为只有遇到问题解决问题，经验才会积累下来。

5、 培养独立解决问题的能力

学习过程中要不断把自己培养成一个可以独立解决问题的人，因为只有这样你才能独当一面，刚开始不懂可以有人带你入门，但是不要依赖别人的解答，逐渐的要靠自己，别人不能帮你一辈子。

6. 掌握得当的学习方法

初期自己别盲目，多跟别人去请教一下学习方法，如何学习才能变得更加有效率，不至于自己走太多弯路，觉得自己不适合，往往都是我们的方式错误了。

最后一点，对于开发人员来说，经常被忽视但确实非常重要的是一点就是获取一些软技能。

虽然了解事物的技术层面是很有用的，但知道如何在团队中交流也同样重要。

有同理心、懂得与团队合作交流、平易近人和乐于助人、有耐心.......这些闪光点都可以帮你成为更好的前端开发者，永远记住：高级开发人员最重要的交付物是更高级的开发人员。

你也曾在眼花缭乱的新技术与工作实践中迷茫过，找了很多资料，踩了很多坑，想像那些技术大牛们一样，不管技术发展多快，他/她们都可以从容不迫，一直站在塔尖吗？