前端要学哪些东西（前端应该怎么学）

今天的文章主要是理论上的，就跟家常一样，唠唠嗑，聊聊天，可能会有写枯燥，但我觉得如果有人能真正的理解明白，并且坚持，前端这条路还是非常光明的。

现在社会上很多人看到前端开发程序员工资高，就想去学习前端开发编程技术，于是就去报培训班，或者去找各种网络资料来自学，学着学着，发现好难呀，前端技术更新好快呀，慢慢的发现自己好像根本跟不上，课程内容也听不懂。

开始的时候，还会逼一下自己，听不懂的时候，还会努力去听，努力去学，再过几天的时候，发现自己好像真的一点都听不懂了，就开始怀疑自己，然后就有放弃的念头。

哪天又被程序员的高工资刺激了，然后又学习热情高涨，又去学习前端开发技术，然后又是一个恶性循环开始，听不懂，又开始想着就放弃，可能到最后就彻底放弃，身边就有不少刚开始信心满满的准备自学前端开发，后来慢慢从入门到放弃的朋友，真的很可惜，大多数此类情况，再坚持一下就能学的深一点，找份不错的工作了。

但是你们想过怎么解决吗，似乎从来没有想过去认真解决这类问题，前端技术更新快，感觉自己学不动了，那你想过是什么原因吗？是真的技术更新太快了，还是自己基础不够牢固？

总之，学习任何一门技能，都不是一件容易的事。但是不管技术怎么发展更新迭代，但是总是有一些牛人大咖们，面对新技术依然可以从容不迫，一直在技术的最前沿，站在行业的最顶端。

如今前端工程师已经成为研发体系中的重要岗位之一。但大部分前端工程师的知识，也包括我，其实都是来自于实践和工作中零散的学习。

常常有一些工作多年的工程师，在看到一些比较基础的JavaScript语法的时候，还会惊呼“居然可以这样”。仔细一想这就是，基础知识的欠缺限制了解决问题的思路。

第一个方法：建立知识架构

我们来思考一个问题，如果我们要给JavaScript知识做一个顶层目录，该怎么做呢？

如果我们把一些特别流行的术语和问题，拼凑起来，可能会变成这样：

• 类型转换；
• this指针；
• 闭包；
• 作用域链；
• 原型链；
• ……

这不是我们想要的结果，因为这些知识点之间，没有任何逻辑关系。它们既不是并列关系，又不是递进关系，合在一起，也就没有任何意义。

如果按照知识架构的完备性，我们再往下细分一个层级，就变成了这个样子：

• 文法
• 词法
• 语法
• 语义
• 运行时
• 类型
• 执行过程

为什么这么划分？文法可以分成词法和语法，这来自编译原理的划分，同样是完备的。语义则跟语法具有一一对应关系，这里暂时不区分。

对于运行时部分，这个划分保持了完备性，我们都知道：程序 = 算法 数据结构，那么，对运行时来说，类型就是数据结构，执行过程就是算法。

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

这样逐层向下细分，知识框架就初见端倪了。在顶层和大结构上，我们通过逻辑来保持完备性。如果继续往下，就需要一些技巧了，我们可以寻找一些线索。

建立知识架构，同样有利于面试，没人能够记住所有的知识，当不可避免地谈到一个记不住的知识，如果能快速定位到它在知识架构中的位置，把一些相关的点讲出来，我想，这也能捞回不少分。

第二个方法：追本溯源

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

• opacity；
• display。

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

还有一些知识，涉及的概念本身经历了各种变迁，变得非常复杂和有争议性，比如MVC，从1979年至今，概念变化非常大，MVC的定义几乎已经成了一段公案，在MVC原始论文、MVP原始论文、微软MSDN、Apple开发者文档，这些内容里面，MVC画的图、箭头和解释都完全不同。

这种时候，就是我们做一些考古工作的时候了。追本溯源，其实就是关注技术提出的背景，关注原始的论文或者文章，关注作者说的话。

操作起来也非常简单：翻翻资料（一般wiki上就有）找找历史上的文章和人物，再顺藤摸瓜翻出来历史资料就可以了，如果翻出来的是历史人物（幸亏互联网的历史不算悠久），你也可以试着发封邮件问问。

这个过程，可以帮助我们理解一些看上去不合理的东西，有时候还可以收获一些趣闻，比如JavaScript之父 Brendan Eich 曾经在Wikipedia的讨论页上解释JavaScript最初想设计一个带有prototype的scheme，结果受到管理层命令把它弄成像Java的样子（如果你再挖的深一点，甚至能找到他对某位“尖头老板”的吐槽）。

根据这么一句话，我们再去看看scheme，看看Java，再看看一些别的基于原型的语言，我们就可以理解为什么JavaScript是现在这个样子了：函数是一等公民，却提供了new this instanceof等特性，甚至抄来了Java的getYear这样的Bug。