写点什么

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

  • 2019 年 1 月 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 年 1 月 21 日 15:2613349

评论 4 条评论

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

阿里云视觉智能开放平台2D视频转3D视频开启邀测啦

夏夜许游

人工智能 AI 3D

常见的http请求参数和响应参数,前后端交互参数说明

共饮一杯无

9月月更 请求头 请求参数

Github星标90K!京东架构师一篇讲明白百亿级并发系统架构设计

了不起的程序猿

Java 程序员 高并发 java程序员 高并发系统设计

Spring 框架使用了哪些设计模式?

Java快了!

spring框架

华为云宣布全面建设全球初创生态,3年内赋能10000家高潜初创企业

华为云开发者联盟

云计算 创业 创新创业 企业号九月金秋榜

阿里云视觉智能开放平台离线人脸识别SDK开启邀测啦

夏夜许游

人工智能 AI 人脸识别 离线包

【死磕JVM】用Arthas排查JVM内存 真爽!我从小用到大

Java快了!

SAP ABAP 平台新的编程模型

Jerry Wang

SAP abap Netweaver 思爱普 9月月更

硬核!阿里P8自爆秋招面试核心手册,Github上获赞65.7K

Java学习爱好者

Java 程序员 面试 八股文 金九银十

实操指南:如何为 SAST 工具设置误报基准?

SEAL软件供应链安全

应用安全 静态应用安全测试 SAST 应用安全测试 软件供应链安全

计算机网络——码元、波特

StackOverflow

编程 计算机网络 9月月更

JWT本无状态,为何却要存储在Redis破坏其无状态特性?

知识浅谈

JWT 9月月更

现代数据栈如何降低数据平台的复杂度?

Kyligence

数据分析 云原生 指标中台 指标自动化

【HTML-CSS】小游戏--渣灰哥的愿望之砍砍渣灰

Sam9029

JavaScript HTML5, CSS3 9月月更

编译器优化:何为别名分析

华为云开发者联盟

开发 编译器 企业号九月金秋榜

怎样才能开一场高效的迭代评审会?

LigaAI

Scrum 迭代 LigaAI 敏捷实践 企业号九月金秋榜

网易易盾 GameSentry 正式开源,做游戏安全保障的尖兵利刃

网易智企

安全 测试

心血来潮,手绘一张Spring学习思维,内容详细全面,秋招面试必看!

收到请回复

Java 云计算 开源 架构 编程语言

“基础-中级-高级”Java程序员面试合集,看完献出我的膝盖!

收到请回复

Java 云计算 开源 架构 编程语言

阿里云视觉智能开放平台商品图智能生成开启邀测啦

夏夜许游

人工智能 AI 电商 图像分割

住宅代理IP在网络攻击中的作用

郑州埃文科技

代理IP 安全检测 撞库攻击

iofod - Echart 图表全支持

iofod jude

Java 前端 低代码

阿里、腾讯、美团春招真题“惨遭”泄露,Github上标星66.3K

Java学习爱好者

Java 程序员 架构 面试 跳槽

TCPIP协议栈的心跳、丢包重传、连接超时机制实例详解

Java快了!

为超级品牌打造「上瘾算法」|Whale 帷幄发布全新 DAM & VAP 内容数字化产品

科技热闻

一线架构师开发总结:剖析并发编程+JVM性能,深入Tomcat与MySQL!

收到请回复

Java 云计算 开源 架构 编程语言

3D打印机打印模型的10大技巧

Dylan

3D模型

劲爆!阿里巴巴面试参考指南(嵩山版)开源分享,程序员面试必刷

Java学习爱好者

Java 程序员 面试 跳槽 金九银十

资源使用率提高25%,成本降低90%,云函数是怎么做到的?

最新动态

PANews与NFTScan联合推出Top50 NFT Collection全球影响力榜单

NFT Research

Ethereum NFT

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