明确自己的前端学习方法和路线。
当前代码界,大多数的前端开发人员的前端知识都是来自于实践以及工作闲暇时候的零散学习,这样就会引发一系列的问题:
前端基础知识不牢固。js知识是零散学习的,由此会不能了解到某些基础语法的用法,基础知识的欠缺会让自己遇到问题的时候束手无策,加大的解决问题的时间成本,也会限制死自己解决问题的思路。
技术上存在短板,导致上升道路不通畅。小公司的前端开发人员,当面对问题只能靠自己摸索并尝试去解决,这样无法判定解决方案的优劣性,会陷入无限重复性劳动的陷阱,从而限制自己职业的发展。
前端工程师也会面临技术发展问题带来的挑战。ES6引入的新特性超过了过去10年的总和,一个Proxy特性,就使得vue.js从2.0到3.0的底层升级(内核升级);缺少系统的学习+技术快速革新,对前端开发者的自学能力考验极大。
学习前端不仅仅学习知识点,还有体系架构和学习方法,能摸索出适合自己的前端学习方法,还有能建立起前端技术的知识架构,最后理解前端技术背后的核心思想,这几点尤为重要。
学习前端的两个方法:
1、建立知识架构
2、追本溯源
怎么建立自己的知识架构呢?首先我们得了解什么叫知识架构,可以把它理解为“目录”或者索引,它能帮助我们把零散知识组织起来,帮助我们发现知识上得一些盲区,以驱使我们不断去完善自己的知识架构。
例如给js知识做一个目录,我们先说几个常听到的词语:
类型转换、this指针、闭包、作用域链、原型链......
一看这些知识点,并没有什么太大的关联,什么关系都不是,并不能让我们建立起知识架构,更不用说去寻找知识盲区。当对此再一次划分,会是这样:
1、文法
2、语义
3、运行时
这样分的原因是,对于任何计算机语言来说,必定是“用规定的文法,去表达特定的语义,最终操作运行时”的一个过程。这样你看,js的知识都不会超过这个范围,不然那么多这谁顶得住,这也叫知识的完备性。当再次细分:
1、文法
1-1 词法
1-2 语法
2、语义
3、运行时
3-1 类型
3-2 执行过程
文法可以分为词法和语法,来自编译原理的划分,同样是完备的,语义跟语法具有一一对应关系,不做划分;对于运行时部分,保持了完备性,我们都知道一句话:程序=算法+数据结构,那么对于运行时来说,类型就是数据结构,执行过程就是算法。
当再往下细分的时候,会看到很多熟悉的概念了,词法中有各种量、关键字、运算符,语法和语义则是表达式、语句、函数、对象、模块,类型则包含对象、数字、字符串等等
这样逐层细分,自己的前端知识架构就初见端倪。在顶层和大结构上,我们通过逻辑保持完备性。学习的过程,实际上就是知识架构的不断进化的过程,通过知识架构的自然延申,我们可以更轻松记忆原本难以记忆的知识点,还可与发现被忽视的盲区。
接着,怎么追本溯源呢?
举个例子,CSS里有 opacity display 两个属性,opacity对应的是一个数值,表达的意思也很明确;而display每一个取值后都是一个不同的布局体系。虽然都是属性,但是背后的知识量完全是不同的。简而言之,追本溯源,就是关注技术提出的背景,关注原始的论文或者文章,关注作者说的话。