重学前端（1）

写在前面：

重学前端系列是基于学习winter老师的重学前端课程进行的

 

个人状态：

　　散点自学 + 基础不牢

　　而对于工作之后的前端开发者来说，没有系统学习的问题仍然存在，常常有一些具有多年从业经验的工程师，仍然会在看到一些用法时惊呼：“还可以这样！”在我看来，这些用法都是一些基础的不能再基础的知识点，但是他们却浑然不知。当然我也是这样。

　　如果深入进去了解，你会发现，表面上看他们可能是一时忘记了，或者之前没注意，但实际上是他们对于前端的知识体系和底层原理没有真正系统地理解。

　　winter戏称很多同学学前端的方式是“土法学前端”，他们对于知识的理解基本都停留在点上，从来没有大范围把这些点串成线，形成自己的知识体系，因此才会出现上面说的遗漏和盲点。

 

　　关于前端工程师成长，我认为需要两个视角。

　　　　一是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论；

　　　　二是放眼团队，从业务和工程角度思考前端团队的价值和发展需要。只有这样做，才能够持续发展，在高速发展的技术和工程浪潮中稳稳立足。

　　整个专栏，将知识分成了四个模块来讲解：

• JavaScript；
• CSS 和 HTML；
• 浏览器实践；
• 前端综合应用。

　　前三个模块是前端的基础知识，是个人的前端能力提升，而模块四则是前端团队发展相关的内容，有助于个人和团队的整体提高。

　　在JavaScript 部分中，我主要会从文法和运行时的角度去讨论 JavaScript 语言。它们是互相关联的，而语义就是文法到运行时之间的桥梁；它们分别又是完备的，任何语言特性都离不开两者，所以从语法和运行时的角度，我们都可以了解完整的 JavaScript。CSS 和 HTML 部分，会侧重从语言和设计思想的角度来讲解，我们同样可以对两者的全貌建立一些认知。

　　浏览器部分，包含了浏览器工作的原理和一些重要的 API，包括 BOM、DOM、CSSOM 和其他一些内容。了解了这些知识，你才能把 JavaScript 和 HTML、CSS连接起来，用 JavaScript 来实现功能。

　　前端综合应用部分，主要winter的一些工作经验，这部分待定。

 

明确前端学习路线和方法

 

　　存在的问题

• 前端的基础知识 

• 技术上存在短板，就会导致前端开发者的上升通道不甚顺畅 

• 前端工程师也会面临技术发展问题带来的挑战 

　　学习方法：

　　

1、建立知识架构

• 文法
• 语义
• 运行时

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

　　我们都知道：程序 = 算法 + 数据结构，那么，对运行时来说，类型就是数据结构，执行过程就是算法。

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

 

　　还有一种就是拼凑起来，可能会变成这样：

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

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

 

 

2、追本溯源

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

　　　　opacity；

　　　　display。

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

 

 

要试着建立自己的知识架构，除此之外，还要学会追本溯源，找到知识的源头。下面是我们系统学习的一个知识架构