“计算机之子”winter：个人前端学习路线与方法

你好，我是winter。今天咱们一块儿来聊聊前端的学习路线与方法。

到如今为止，前端工程师已经成为研发体系中的重要岗位之一。但是，与此相对的是，我发现极少或者几乎没有大学的计算机专业愿意开设前端课程，更没有系统性的教学方案出现。大部分前端工程师的知识，其实都是来自于实践和工做中零散的学习。

基础知识的欠缺会让你束手束脚，更限制你解决问题的思路。缺乏系统教育加上技术快速革新，在这样的大环境下，前端工程师保持自学能力就显得尤为重要了。

那么，前端究竟应该怎么学呢？我想，我想给你们简单分享一下本身的经验。

学习路径与学习方法

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

若是你至少已经有了一年以上的工做经验，但愿在技术上有必定突破，我最近在极客时间的专栏《重学前端》是一个不错的选择。

除此以外，我想和你谈两个前端学习方法。

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

创建本身的知识架构，而且在这个架构上，不断地进行优化。

咱们先来说讲什么叫作知识架构？咱们能够把它理解为知识的“目录”或者索引，它可以帮助咱们把零散的知识组织起来，也可以帮助咱们发现一些知识上的盲区。

固然，知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。

咱们来思考一个问题，若是咱们要给JavaScript知识作一个顶层目录，该怎么作呢？

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

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

、这其实不是咱们想要的结果，由于这些知识点之间，没有任何逻辑关系。它们既不是并列关系，又不是递进关系，合在一块儿，也就没有任何意义。这样的知识架构，没法帮助咱们去发现问题和理解问题。

若是让我来作，我会这样划分：

• 文法；
• 语义；
• 运行时。

为何这样分呢，由于对于任何计算机语言来讲，一定是“用规定的文法，去表达特定语义，最终操做运行时的”一个过程。

这样，JavaScript的任何知识都不会出如今这个范围以外，这是知识架构的完备性。咱们再往下细分一个层级，就变成了这个样子：

• 文法

  词法

  语法

• 语义

  运行时

  类型

• 执行过程

我来解释一下这个划分。

文法能够分红词法和语法，这来自编译原理的划分，一样是完备的。语义则跟语法具备一一对应关系，这里暂时不区分。

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

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

这样逐层向下细分，知识框架就初见端倪了。在顶层和大结构上，咱们经过逻辑来保持完备性。若是继续往下，就须要一些技巧了，咱们能够寻找一些线索。

好比在JavaScript标准中，有完整的文法定义，它是具备完备性的，因此咱们能够根据它来完成，咱们还能够根据语法去创建语义的知识架构。实际上，由于JavaScript有一份统一的标准，因此相对来讲不太困难。

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

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

第二个方法，我把它称做追本溯源。

有一些知识，背后有一个很大的体系，例如，咱们对比一下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。

今天我带你探索了前端的学习路径，并提出了两个学习方法：你要试着创建本身的知识架构，除此以外，还要学会追本溯源，找到知识的源头。

---

戳此查看完整文章：

01 | 明确你的前端学习路线与方法

拓展阅读：

一份前端知识架构图，戳此领取

做者程劭非，网名“winter”，前端社区知名专家，前手机淘宝前端负责人，极客时间《重学前端》专栏做者。前后就任于微软、盛大、阿里巴巴等公司。winter 早年作过嵌入式系统浏览器、电子书和 WebOS 的相关工做，近年致力于移动前端领域研究，提出过 Flexible 布局等先进概念，也产出过 Weex 这样的移动前端开发框架。