阅读 697

我在整理 Web 前端知识体系

what-is-fe 争做国内完善、系统的 Web 前端知识体系

前言

很久很久以前(这个社会进步很快,几年就是很久了),我写过一篇文章《自己总结的web前端知识体系大全【欢迎补充】》(后来也有很多人转载,包括那些未经过我同意的),阅读量和点赞都挺多。

再后来,我又在慕课网上写过一篇《web前端知识体系梳理》,也被运营人员转载到了知乎和微信公众号上,加起来阅读量也不小。

上述的内容,全部的流量都算上的话,估摸着总 pv 肯定超过 100w 。可见大家对于这个话题还是比较感兴趣的,这是群众基础。

而且这个话题是持久有效的,再过 10 年、技术再更新,也需要知识体系这个东西。

(原文链接 juejin.im/post/685512… ,未经允许不得转载!)

现状

上述那两篇文章,大家可以打开看两眼,也可以不看。因为这都是我之前临时总结的内容,时间短,就不能保证全面。我最新整理的知识体系,花费时间比较长,会完善很多。可以继续往下看,或者先一睹为快

除了我写的,网络上还有其他人写的关于 web 前端知识体系的文章、图等。你可以去网上搜一下“前端知识体系”或者“前端知识大全”等话题,会搜出很多内容,但有很多问题。

  • 内容过时。前端这几年进化非常快,过时且没更新的内容,会误导读者。例如一些工具或者规范,现在已经不用了,那就没必要再去学了。
  • 内容不全。例如有些只关注了 js html 和 css ,这明显是把前端的范围缩小了。
  • 不够体系。例如将算法和 JS 原型放在一起。
  • 不够统一。能搜出来的内容,都各说各的,没有什么共性。这么重要的内容,我觉得有必要统一起来,继续逐步完善。

what-is-fe

既然现在没有合适的内容,那我觉得自己有必要重新整理一下。

前端发展至今,尚未到完全稳定的阶段。考虑知识体系的人本来就不多,能写出来的就更少了,能称为权威的还没有。 而我从 4 年前开始考虑这个问题,应该还算是对“前端知识体系”这个话题有一点话语权的。 其实这些年我一直在思考知识体系这个话题,思考如何能做的更好。

我一直想打造一个关于 Web 前端知识体系的规范品牌。这几天业余空闲多,我就把之前的内容都整理了一下,做出了一个网站原型 what-is-fe

目前内容还很空,但我会慢慢的往上补充。每补充的内容,我也都会写成博客,发布出来。您如果觉得知识体系内容不全或者有错误,也可以去 github 提交 issue 或者 PR 。

我们为何需要知识体系

业界的资深技术 leader 曹乐写过《如何成为技术大牛》。其中降到了成为技术大牛的三个必要步骤:

  • 找准知识体系
  • 刻意训练
  • 及时反馈

即,无论是在哪个行业、哪个领域,想要成为技术大牛,必须了解这个行业的知识体系。

前端相比于其他技术栈,给人的感觉就是“乱”,啥啥都要学,此时更加需要一个知识体系来规整,别让自己继续乱下去。 有了体系,就知道自己哪些熟悉、哪些不熟悉,做到全盘掌握。而没有体系,你就会觉得这也要学、那也得会,哪儿哪儿都是自己需要掌握的,好乱,学不动了……

很多人在制造焦虑,很多人在以为别人给自己制造焦虑。但让你去了解知识体系,绝对不是制造焦虑,而是避免焦虑的有效方式。

我对知识体系的初体验

讲一个我自己的故事,我是从合适开始是被到知识体系的。

这也是很久很久以前,我刚毕业 2 年多,我去学习并且考取了 PMP ,一个项目管理证书。因为我当时的工作,是给一些企业开发项目管理软件,类似于微软的 project ,不过是网页版。

在学习 PMP 之前,我一直觉得项目管理也就那写功能,我们都已经开发出来了呀。用户提了一些需求,我们就照着用户的意思做就是了,不会的就去网上查一查,参照一些其他的软件 —— 应该还有很多企业,也是这么做的。

但是考完 PMP 之后,我就发现,原来项目管理是有一整套知识体系的,都是前人总结出来的知识点。只要照着这个知识体系,它就能解决 90% 的问题。而之前用户提的问题,都全在这个知识体系里面,早就有答案了,不用我们再去网上查、再去参考其他软件的实现。

同理,我也很快意识到,学习编程也是这么个道理,梳理知识体系,然后逐个攻破,注重基础。所以,那段时间我技术进步非常快。

知识体系应该是什么样子的

知识体系不是越新越好,也不是越多越好。贪新、贪多,一直都是大部分程序员的问题。我觉得,只要具备以下两点就可以了。

全面

知识体系一定要保证知识点全面,不能有遗漏。但是,全面并不是越多越好,而是越少越好。现在是一个知识爆炸的时代,无关的东西尽量剔除掉,别占用我们有限的大脑内存。

体系

知识点很多,但并不是一盘散沙,而是结构化、体系化的。

就类似于一棵树有几千片树叶子,但是他们都是有序的分布再各个树枝上的,而且树枝、树干还有结构关系。再例如,一个学校有 2w 个学生,要分学院、专业、班级,这样才能管理的起来,否则就是一群流民。再例如,一本书几十万字,也要分章节才能组织起来。

这一点非常重要,否则这么多知识点,都散乱的话,我们是记不住的。只有合理的组织,我们才能理解并且掌握。

如何整理出一个知识体系

要把前端所有内容都涵盖了,而且要做到体系、结构化、不杂乱,其实挺难的。所以我前前后后花了很多精力来查阅资料,思考总结,然后整理这个知识体系。

PS:我整理这份知识体系,对标的是高级前端工程师,即至少是能达到大厂基层前端工程师的水平。所以考虑的内容会比较多,也有很多基础知识。

首先要确定范围

说到前端,现在扯的东西特别多,范围越来越大。而刚开始做知识体系,先把范围定小一点,慢慢来。所以,目前的知识体系仅仅是狭义的前端,即开发网页。但是内容也非常多。

想到前端,很多人可能下意识的说,要先学 html css 和 js ,然后就是现在流行的 Vue React ,巴拉巴拉。

其实这里忽略了一个前提,作为前端程序员,首先得是一名程序员。所以关于程序员的编程知识也得有,即大学里学的那些计算机基础课程。不要求像准备考研似的那么精通,至少得大概了解。

网页还会涉及和服务端通讯,就需要 http 的相关知识,这块内容也不少。

写代码的时候可能会用到各种工具流程,即开发环境的知识储备,也得有。

代码写完、测试完,上线运行起来了,此时可能会有性能问题、安全隐患,需要检测统计等,这些也得明白。

然后再体系化处理

如果只是考虑范围,遇到什么新内容就堆进去,其实什么难度。但这样做,那出来的结果就是一盘散沙,就像你浏览器书签里那么多收藏一样,并没有啥帮助。举一个例子,前者就像一个国家有 1 亿人,没有组织和管理,后者就像一个国家有 1 亿人,有全国首脑,且划分了省市区层层级别,进行管理。

知识体系,分开来说。一是知识,二是体系(即结构化)。有了体系和结构化,才容易理解和记忆。有了体系和机构化,才容易再次扩展和更新。

如何体系化,不光要看自己对这个行业的理解,还很考验总结归纳能力。我的划分方式,大家直接去看知识体系的详情吧。一开始我还是抱着一种理想主义的心态来做,但做到最后发现还是需要很多权衡和取舍,没法做到想象中的完美。

例如,第一级“网络请求”应该也属于“语法&规范”中的内容,但是这条内容太多,而且很重要,就单独拿出来了。再例如,第一级“常用工具”,如果仔细搜索并积累的话,会有很多,但是为了减少信息量(现在信息量已经很大了),不得不尽量减少。

总之,如何体系化没有标准,也没有对错。有任何好的建议,欢迎提给我。

范围之外的内容

我们说的“大前端”,还包括很多其他的内容,以后再根据优先级去扩展更新。

  • 跨端(RN,Weex)
  • hybrid(ionic cordova)
  • 小程序
  • PWA
  • electron
  • nodejs

一些更加抽象,比知识点更加高阶的内容,也暂时不在该范围中。后面会根据需要继续补充。

  • 基础建设
  • 架构设计(如现在比较火的微前端)

一些暂时还没常用的知识,也暂不包含

  • Shadow DOM
  • Web Component

怎样学习前端知识体系

先讲明白,这是以上帝视角来看所有的范围,不会有细节。 即,学完会提高你的视野,帮你找准方向,甚至思考问题的方式。但不会立马帮你解决当下的问题,不是即学即用的。 但它将影响你接下来的职业生涯。它是“道”不是“术”。

看到这么多,不要焦虑,不要气都学会,但要求都知道。你如何理解一个东西(视野、认知),决定了你将达到的高度。 如果你觉得前端只有 js html css ,那也就决定了你突破不了这个界限。

也不要盲目学习,要看你的定位、职业发展和市场的需求。不要把有限的精力用于无限的知识扩展,要把所学的知识用起来。 “世界上宽广的,世界不是高深的” —— 有人评价王垠。

想持续学习逐步精通,还需要有一些知识点之外的软技能,例如:

  • 搜索
    • caniuse
    • 思否
    • stackoverflow
  • 阅读文档
  • 英语
  • 写作(常见的博客网站)
  • 总结归纳(抽象)
  • 业余充电意识
  • 尝试做开源

关于知识盲区

一定要允许自己有知识盲区,甚至可以有很多的知识盲区。—— 但是,要把这些盲区也纳入到你的体系中。即,你可以没用过、不知道细节,但是你得知道它叫啥,它是干嘛的。

我们每个人的精力和工作经历都是有限的,你不可能了解的既精通又全面,所有有知识盲区很正常。

例如我自己,canvas 和 svg 我都没实际用过,它们的一些细节我也不知道。但它们在我的知识体系里,我知道他们是网页做图形的,如果哪天用到了,我至少知道这些技术方案,还能快速的查一查学一学,做点基本的工作。

最后

科学的学习思维,肯定有一条是关于体系思维的。这一点你如果不太懂的话,先相信我就可以了。

学习前端知识体系,欢迎多看看 what-is-fe