来QCon北京,现场感受“纯血鸿蒙”的魅力!席位有限,抓紧报名 了解详情
写点什么

“计算机之子”winter:我的前端学习路线与方法

  • 2019-01-21
  • 本文字数:2418 字

    阅读完需:约 8 分钟

“计算机之子”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 这样的移动前端开发框架。


2019-01-21 15:2614780

评论 4 条评论

发布
用户头像
讲的很一般
2021-08-24 09:01
回复
用户头像
这个头衔牛逼了
2019-02-13 09:14
回复
用户头像
计算机之子。。。。。谁封的?
2019-01-21 17:24
回复
是有点那啥。。。
2019-01-21 18:37
回复
没有更多了
发现更多内容

一道React面试题把我整懵了

beifeng1996

React

一天梳理完React所有面试考察知识点

beifeng1996

React

前端高频手写面试题指南

helloworld1024fd

JavaScript

React源码分析8-状态更新的优先级机制

goClient1992

React

JavaScript 中获取数组最后一个元素3种方法及性能

devpoint

JavaScript slice 数组操作

构建有参与感的干系人小组指南(译)

Bruce Talk

Scrum 敏捷开发 Agile

能不能手写Vue响应式?前端面试进阶

bb_xiaxia1998

Vue

前端一面高频vue面试题(边面边更)

bb_xiaxia1998

Vue

【AI技术分享会第8期】EMNLP 2022 小样本学习论文解读来啦!开年直播好礼相送

阿里云大数据AI技术

人工智能 自然语言处理 深度学习

从技术专家到总经理,在不确定中探索和成长

石云升

极客时间 2月月更 技术领导力实战笔记

为什么字节跳动选择使用 Go 语言?

Jackpop

从0到1:健身房私教预约小程序开发笔记

CC同学

私教预约小程序

80%的前端开发都答不上来的js异步面试题

loveX001

JavaScript

京东前端高频react面试题集锦

beifeng1996

React

字节前端二面经典vue面试题(边面边更)

bb_xiaxia1998

Vue

写个JS深拷贝,面试备用

helloworld1024fd

JavaScript

JS模块化—CJS&AMD&CMD&ES6-前端面试知识点查漏补缺

loveX001

JavaScript

说说Vue响应式系统中的Watcher和Dep的关系-面试进阶

bb_xiaxia1998

Vue

一个炫酷的头像悬停效果

南城FE

CSS css3 前端 动画 交互设计

从React源码分析看useEffect

goClient1992

React

管理者既要安定内部,也要团结外部

石云升

极客时间 2月月更 技术领导力实战笔记

2023面试官常考的前端面试题

loveX001

JavaScript

NutUI 4.0 正式发布!

京东科技开发者

CSS GitHub UI 轻量化 企业号 2 月 PK 榜

假如面试官要你手写一个promise

helloworld1024fd

JavaScript

我们从 CircleCI 安全事件获得的3个经验教训

SEAL安全

安全 软件供应链 企业号 2 月 PK 榜 端点保护 恶意软件检测

响应式操作实战

老周聊架构

响应式编程 2月月更

腾讯前端二面手写面试题

helloworld1024fd

JavaScript

React源码分析8-状态更新的优先级机制

goClient1992

React

校招前端必会面试题及答案

loveX001

JavaScript

高效学 C++|编程实例之计算器

TiAmo

c++ 语言 & 开发 语言设计

百度前端常见react面试题

beifeng1996

React

“计算机之子”winter:我的前端学习路线与方法_大前端_程劭非_InfoQ精选文章