前端究竟怎么学？这些前端用法你真的知道吗？

对于大多数前端工程师来说&＃xff0c;一直面临的问题&＃xff0c;是从未进行过前端技术的系统学习。

我见到有一些具有多年从业经验的工程师&＃xff0c;仍然会在看到一些用法时惊呼&＃xff1a;“还可以这样&＃xff01;”

在我看来&＃xff0c;这些用法都是一些基础的不能再基础的知识点&＃xff0c;但是他们却浑然不知。如果深入进去了解&＃xff0c;你会发现&＃xff0c;表面上看他们可能是一时忘记了&＃xff0c;或者之前没注意&＃xff0c;但实际上是他们对于前端的知识体系和底层原理没有真正系统地理解。

那么&＃xff0c;前端究竟怎么学&＃xff1f;今天&＃xff0c;跟大家聊一聊我的前端学习路线和方法。

** 学习路径与学习方法**

首先是 0 基础入门的同学&＃xff0c;你可以读几本经典的前端教材&＃xff0c;比如《Javascript 高级程序设计》、《精通 CSS》等书籍&＃xff0c;去阅读一些参考性质的网站也是不错的选项&＃xff0c;比如 MDN 。

如果你至少已经有了一年以上的工作经验&＃xff0c;希望在技术上有一定突破&＃xff0c;我想和你谈两个前端学习方法。

** 方法一&＃xff1a;建立知识架构**

建立自己的知识架构&＃xff0c;并且在这个架构上&＃xff0c;不断地进行优化。

什么叫做知识架构&＃xff1f;我们可以把它理解为知识的“目录”或者索引&＃xff0c;它能够帮助我们把零散的知识组织起来&＃xff0c;也能够帮助我们发现一些知识上的盲区。当然&＃xff0c;知识的架构是有优劣之分的&＃xff0c;最重要的就是逻辑性和完备性。

我们来思考一个问题&＃xff0c;如果我们要给 Javascript 知识做一个顶层目录&＃xff0c;该怎么做呢&＃xff1f;

如果我们把一些特别流行的术语和问题&＃xff0c;拼凑起来&＃xff0c;可能会变成这样&＃xff1a;

类型转换&＃xff1b;
this 指针&＃xff1b;
闭包&＃xff1b;
作用域链&＃xff1b;
原型链&＃xff1b;
……
这其实不是我们想要的结果&＃xff0c;因为这些知识点之间&＃xff0c;没有任何逻辑关系。它们既不是并列关系&＃xff0c;又不是递进关系&＃xff0c;合在一起&＃xff0c;也就没有任何意义。这样的知识架构&＃xff0c;无法帮助我们去发现问题和理解问题。

如果让我来做&＃xff0c;我会这样划分&＃xff1a;

文法&＃xff1b;
语义&＃xff1b;
运行时。

为什么这样分呢&＃xff0c;因为对于任何计算机语言来说&＃xff0c;必定是“用规定的文法&＃xff0c;去表达特定语义&＃xff0c;最终操作运行时的”一个过程。这样&＃xff0c;Javascript 的任何知识都不会出现在这个范围之外&＃xff0c;这是知识架构的完备性。

我们再往下细分一个层级&＃xff0c;就变成了这个样子&＃xff1a;

文法
词法
语法
语义
运行时
类型
执行过程

我来解释一下这个划分。

文法可以分成词法和语法&＃xff0c;这来自编译原理的划分&＃xff0c;同样是完备的。语义则跟语法具有一一对应关系&＃xff0c;这里暂时不区分。

对于运行时部分&＃xff0c;这个划分保持了完备性&＃xff0c;我们都知道&＃xff1a;程序 &＃61; 算法 &＃43; 数据结构&＃xff0c;那么&＃xff0c;对运行时来说&＃xff0c;类型就是数据结构&＃xff0c;执行过程就是算法。

当我们再往下细分的时候&＃xff0c;就会看到熟悉的概念了&＃xff0c;词法中有各种直接量、关键字、运算符&＃xff0c;语法和语义则是表达式、语句、函数、对象、模块&＃xff0c;类型则包含了对象、数字、字符串等。

这样逐层向下细分&＃xff0c;知识框架就初见端倪了。在顶层和大结构上&＃xff0c;我们通过逻辑来保持完备性。

如果继续往下&＃xff0c;就需要一些技巧了&＃xff0c;我们可以寻找一些线索。

比如在 Javascript 标准中&＃xff0c;有完整的文法定义&＃xff0c;它是具有完备性的&＃xff0c;所以我们可以根据它来完成&＃xff0c;我们还可以根据语法去建立语义的知识架构。实际上&＃xff0c;因为 Javascript 有一份统一的标准&＃xff0c;所以相对来说不太困难。

如果是浏览器中的 API&＃xff0c;那就困难了&＃xff0c;它们分布在 w3c 的各种标准当中&＃xff0c;非常难找。但是我们要想找到一些具有完备性的线索&＃xff0c;也不是没有办法。我喜欢的一个办法&＃xff0c;就是用实际的代码去找&＃xff1a;for in 遍历 window 的属性&＃xff0c;再去找它的内容。

我想&＃xff0c;学习的过程&＃xff0c;实际上就是知识架构不断进化的过程&＃xff0c;通过知识架构的自然延伸&＃xff0c;我们可以更轻松地记忆一些原本难以记住的点&＃xff0c;还可以发现被忽视的知识盲点。

** 方法二&＃xff1a;追本溯源**

有一些知识&＃xff0c;背后有一个很大的体系&＃xff0c;例如&＃xff0c;我们对比一下 CSS 里面的两个属性&＃xff1a;

opacity&＃xff1b;
display。

虽然都是“属性”&＃xff0c;但是它们背后的知识量完全不同&＃xff0c;opacity 是个非常单纯的数值&＃xff0c;表达的意思也很清楚&＃xff0c;而 display 的每一个取值背后都是一个不同的布局体系。我们要讲清楚 display&＃xff0c;就必须关注正常流&＃xff08;Normal Flow&＃xff09;、关注弹性布局系统以及 grid 这些内容。

还有一些知识&＃xff0c;涉及的概念本身经历了各种变迁&＃xff0c;变得非常复杂和有争议性&＃xff0c;比如 MVC&＃xff0c;从 1979 年至今&＃xff0c;概念变化非常大&＃xff0c;MVC 的定义几乎已经成了一段公案&＃xff0c;我曾经截取了 MVC 原始论文、MVP 原始论文、微软 MSDN、Apple 开发者文档&＃xff0c;这些内容里面&＃xff0c;MVC 画的图、箭头和解释都完全不同。

这种时候&＃xff0c;就是我们做一些考古工作的时候了。追本溯源&＃xff0c;其实就是关注技术提出的背景&＃xff0c;关注原始的论文或者文章&＃xff0c;关注作者说的话。

操作起来也非常简单&＃xff1a;翻翻资料&＃xff08;一般 wiki 上就有&＃xff09;找找历史上的文章和人物&＃xff0c;再顺藤摸瓜翻出来历史资料就可以了&＃xff0c;如果翻出来的是历史人物&＃xff08;幸亏互联网的历史不算悠久&＃xff09;&＃xff0c;你也可以试着发封邮件问问。

这个过程&＃xff0c;可以帮助我们理解一些看上去不合理的东西&＃xff0c;有时候还可以收获一些趣闻&＃xff0c;比如 Javascript 之父 Brendan Eich 曾经在 Wikipedia 的讨论页上解释 Javascript 最初想设计一个带有 prototype 的 scheme&＃xff0c;结果受到管理层命令把它弄成像 Java 的样子&＃xff08;如果你再挖的深一点&＃xff0c;甚至能找到他对某位“尖头老板”的吐槽&＃xff09;。

根据这么一句话&＃xff0c;我们再去看看 scheme&＃xff0c;看看 Java&＃xff0c;再看看一些别的基于原型的语言&＃xff0c;我们就可以理解为什么 Javascript 是现在这个样子了&＃xff1a;函数是一等公民&＃xff0c;却提供了 new this instanceof 等特性&＃xff0c;甚至抄来了 Java 的 getYear 这样的 Bug。

以上就是我的前端学习路径&＃xff0c;我介绍了两个学习方法&＃xff1a;你要试着建立自己的知识架构&＃xff0c;除此之外&＃xff0c;还要学会追本溯源&＃xff0c;找到知识的源头。

道理我们都懂&＃xff0c;可是去哪学这些内容呢&＃xff1f;在这里&＃xff0c;给大家推荐一个学习平台—在我们的学习圈内&＃xff0c;每天都会有行业大咖分享学习技巧&＃xff0c;实战操作&＃xff0c;为大家讲解现在前端发展趋势&＃xff0c;学习路线&＃xff0c;欢迎小白进来取经。还有免费的直播课&＃xff0c;包含前端学习的技巧、源码、语法、架构等。

通常来讲&＃xff1a;

工作1~2年后会成为前端高级软件工程师&＃xff0c;年薪可以达到15万以上。

工作3-5年后可以成为前端技术主管或者经理&＃xff0c;年薪在15-50万之间。

工作年限5年以上&＃xff0c;会成为互联网公司的技术总监或产品经理&＃xff0c;年薪将达到50万-100万之间。

更多文章推荐阅读 【 学习企鹅圈&＃xff1a;731771211 】 &＃xff1a;

2020年Web前端开发工程师市场怎么样&＃xff1f;学会什么技术才能拿到高薪

分享七年职业生涯心得&＃xff0c;认清自己是否真的适合转行前端开发工程师

【项目实战视频&＃xff0b;源码】20w前端程序员疯抢的成长大礼包

前端修炼之道 &＃xff1a; 如何成为一名合格前端开发工程师&＃xff1f;

前端的工作越来越难找&＃xff0c;到底是不是前端领域已经饱和了&＃xff1f;