写点什么

“计算机之子”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:2615820

评论 4 条评论

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

转转反爬攻防战

转转技术团队

爬虫

重磅大咖来袭!阿里云生命科学与智能计算峰会精彩内容剧透

阿里云弹性计算

高性能计算 生命科学 AI制药 智能计算

OSI 七层模型和TCP/IP模型及对应协议(详解)

Five

TCP/IP TCP协议 8月月更

基于微前端qiankun的多页签缓存方案实践

vivo互联网技术

Vue 前端 微前端 qiankun

开源一夏 | 深入理解 Spring Cloud Gateway 的原理

悟空聊架构

开源 Gateway 认证 签约计划第三季

C++关于函数参数的分析与函数重载进阶教程

CtrlX

c++ 编程语言 后端 cpp 8月月更

松哥手把手教你在 Vue3 中自定义插件

江南一点雨

Java Vue

react高频面试题总结(一)

helloworld1024fd

React

你认同这个观点吗?大多数企业的数字化都只是为了缓解焦虑

雨果

数字化转型 数字化

阿里前端智能化技术探索和未来思考

阿里技术

前端 智能化

阿里云数据存储生态计划发布,助力伙伴数据创新

云桌派

阿里云

外包学生管理系统架构文档

“纯C”实现——三子棋小游戏

一介凡夫

c 后端、 #开源 8月月更

开源一夏 | GO语言框架中如何快速集成日志模块

Masters

开源

流动性质押挖矿系统开发如何制作?单双币系统开发成熟技术

开发微hkkf5566

10份重磅报告 — 展望中国数字经济未来

阿里技术

研究报告

FinClip | 来了, 2022 年 7 月更新大盘点

FinClip

react常见面试题

helloworld1024fd

React

kafka_2.13-3.2.0.tgz配置安装

Cjpler

签约计划第三季

Maven中的scope

六月暴雪飞梨花

maven 开源 技术 8月月更 scope

1对1视频源码——快速实现短视频功能提升竞争力

开源直播系统源码

软件开发 直播系统源码 一对一视频聊天系统

C++引用分析实例与案例刨析及使用场景分析详解

CtrlX

c c++ 后端 程序员进阶 8月月更

如何在技术上来保证LED显示屏质量?

Dylan

LED显示屏 led显示屏厂家

爆款视频怎么做?这里或许有答案!

博文视点Broadview

mysql进阶(二十一)删除表数据与数据库四大特性

No Silver Bullet

MySQL 8月月更 四大特性 表删除

DVWA 通关记录 2 - 命令注入 Command Injection

Todd-Lee

Geoffrey Hinton:深度学习的下一个大事件

OneFlow

人工智能 神经网络 深度学习

【LeetCode】设计数字容器系统Java题解

Albert

LeetCode 8月月更

一体化在线政务服务平台,小程序容器技术加速建设步伐

Speedoooo

小程序 小程序容器 政务平台

博云入选Gartner中国DevOps代表厂商

BoCloud博云

云计算 容器 DevOps 云原生 云平台

STM32+MPU6050设计便携式Mini桌面时钟(自动调整时间显示方向)

DS小龙哥

8月月更

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