写点什么

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

评论 4 条评论

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

阿里架构师花两个月时间整理出来的Java独家面试题(Java岗)

Java架构追梦

Java 程序员 后端开发

Day163

爱好编程进阶

Java 程序员 后端开发

Dockerfile 搭建tomcat基础镜像与项目镜像

爱好编程进阶

Java 程序员 后端开发

Activiti6

爱好编程进阶

Java 程序员 后端开发

不要再焦虑了,进大厂真的没你想象的那么困难

Java架构追梦

9000字通俗易懂的讲解下Java注解,你还看不明白?

爱好编程进阶

Java 程序员 后端开发

头一次见这么牛的的SpringBoot从入门到实战文档

Java架构追梦

spring java面试 后端开发

从领导喊你回去改 Bug 来说如何取消 Dio 网络请求?

岛上码农

flutter ios开发 安卓开发 4月月更 跨平台开发

Centos7安装JDK和Tomcat详细步骤

爱好编程进阶

Java 程序员 后端开发

ElasticSearch中DSL高级检索(Query)

爱好编程进阶

Java 程序员 后端开发

千万级学生管理系统的考试试卷存储方案

凯博无线

对已有系统如何开展TDD

Bruce Talk

敏捷 敏捷开发 TDD Agile

移动办公安全告急?融云 x 海泰方圆,给即时通讯加把「安全锁」

融云 RongCloud

Apache负载均衡与Tomcat集群配置学习(Windows环境)

爱好编程进阶

Java 程序员 后端开发

Day232&233

爱好编程进阶

Java 程序员 后端开发

公司8java开发接私活被抓了,我说他最近咋这么飘

Java架构追梦

程序员 JAVA开发 java面试 后端开发

dubbo 长连接

爱好编程进阶

Java 程序员 后端开发

Elasticsearch Query DSL之Compound queries(复合查询)

爱好编程进阶

Java 程序员 后端开发

Drools规则引擎实践直白总结

爱好编程进阶

Java 程序员 后端开发

Nacos在企业生产中如何使用集群环境?

牧小农

nacos SpringCloud Alibaba

成为Java顶尖程序员之前,先过了下面问题才行

Java架构追梦

Java 后端开发 数据结构与算法

四面字节跳动Java研发岗,最终拿下Offer,只有努力,方能成功,老八股了

Java架构追梦

Java MySQL 程序员 后端开发

@Autowire和@Resource注解使用的正确姿势

爱好编程进阶

Java 程序员 后端开发

docker的网络管理

爱好编程进阶

程序员 后端开发

elasticsearch各种问题总结

爱好编程进阶

Java 程序员 后端开发

五分钟搞懂分布式流控算法

俞凡

架构 算法

GitHub已置顶!Alibaba最终版Java面试小抄+架构师系统进阶指南

Java架构追梦

Java 后端开发 程序员面试

面试了200多个程序员,多数上来就要20K,说实话6K我都不想给

Java架构追梦

Java 后端开发 程序员面试

自己动手写 Docker 系列文章总览

Go Docker 4月月更

9 个 Java 性能调优技巧,YYDS!

爱好编程进阶

Java 程序员 后端开发

Elasticsearch中的Term查询和全文查询

爱好编程进阶

Java 程序员 后端开发

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