数据采集、数据融合、平台能力构建、AI算法支持等方面最新技术实践分享>> 了解详情
写点什么

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

评论 4 条评论

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

长安链源码分析之网络模块 net-liquid(3)

STM32 HAL库串口同时收发,接收卡死?

矜辰所致

串口 STM32L051 10月月更

哪些数据类岗位不容易失业?

雨果

开发数据 数据科学 数据工程师

React-hooks+TypeScript最佳实战

xiaofeng

React

Redis 底层数据结构说明

water

JS继承有哪些,你能否手写其中一两种呢?

helloworld1024fd

JavaScript

推荐|海泰信创浏览器安全解决方案 全面适配安全可靠

电子信息发烧客

如何将 SAP Business Application Studio 里开发的 Java 应用部署到 SAP BTP 上

Jerry Wang

云原生 Cloud 云平台 SAP 10月月更

保10万涨薪、保Offer、保大厂,1V1私教服务上线啦!

霍格沃兹测试开发学社

欧美开源法案频出,你准备好了吗?

安势信息

出海 #开源 SBOM 软件供应链安全 开源合规

2022年10月中国数据库排行榜:达梦冲刺IPO热度不减,PolarDB立足创新夺锦才

墨天轮

数据库 opengauss tdsql TiDB 国产数据库

解React框架核心原理

夏天的味道123

React

自定义注解判断参数为空

派大星

经常被问到的react-router实现原理详解

夏天的味道123

React

几个你必须知道的React错误实践

xiaofeng

React

React-Hook最佳实践

xiaofeng

React

安势清源SCA助力超大规模高科技企业加速开源风险治理

安势信息

开源 腾讯 SCA SBOM 软件供应链安全

利器| Cypress 强大全新的 Web UI 测试框架应用尝鲜

霍格沃兹测试开发学社

年度大促将至,企业如何进行性能压测

阿里巴巴云原生

阿里云 云原生 性能压测 PTS

5个技巧让CIO最大化提升IT项目投资回报率

雨果

CIO ROI

人人能读懂redux原理剖析

夏天的味道123

React

CentOS下搭建Gitea-自己的git服务器

爱写Bug的麦洛

git Gitea

【荣耀云调试FAQ】一个帐号可以同时使用多部手机吗?

荣耀开发者服务平台

开发者 手机 安卓 荣耀 honor

推荐|海泰政务移动办公系统密码应用解决方案 打造移动办公安全

电子信息发烧客

Gartner 权威解读: SBOM 采用率将于2025年达到60%

SEAL软件供应链安全

DevSecOps Gartner SBOM 软件供应链安全

redis实现分布式锁(二)

zarmnosaj

10月月更

保10万涨薪、保Offer、保大厂,1V1私教服务上线啦!

测吧(北京)科技有限公司

测试

企业云安全的6个最佳实践

HummerCloud

10月月更

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