【前端规划】来看看我整理的这一份专属技术知识图谱吧~

柔光的暖阳◎ 2022-12-12 02:23 101阅读 0赞

**前言**

国庆和中秋节来啦，整整八天的大长假，那岂不是能痛快的——学个够啦~哈哈哈放纵要有，学习也不能落下呀，一年也难得有几次这么大段的自主学习时间呢是不是。

既然有这么长的时间学习，自然要好好地梳理一下学习计划，把平时遗漏的知识点补全，整理一份知识体系，所以今天就来制作一张前端知识图谱吧，冲冲冲！  
![在这里插入图片描述][2020100514482561.png_pic_center]

定一个小目标

在开始之前，我们得先想好，我们最终想要得到的图谱是怎么样的，什么样的图谱才算达到了心里的预期。我自己是总结了几个特点：

不拘于形式

首先，我们要知道，最终这个图谱的形式可以是多样的。你可以使用思维导图、word、markdown、图片、博客或者自己搭建一个网站等等，形式只是载体，关键的是内容。

我自己是选择的是思维导图，分点比较直观，结构层次也一目了然，当然你也可以用别的方式归纳总结。

关联性

其次，最终得到的图谱关系中，知识点与知识点应该是存在联系的，不应该是简单的罗列知识点，而是基于自己的理解归纳形成的脉络图，这样才能加深印象便于记忆。

可拓展性

新知识是学不完滴，所以你的知识图谱里当然要给以后新来的小伙伴们腾出位置，这就要求我们需要设置一个完备的架构，麻雀虽小五脏俱全。

动手设计一个知识图谱

明确了需求目标，我们就可以开始总结我们的知识结构啦，以思维导图为例，我将这个过程分为几步：

列出大纲

罗列知识点

将知识点分层

同层知识点建立联系

填充知识点

列出大纲

说的云里雾里的，不如直接上图，简单粗暴。  
![在这里插入图片描述][2020100514484133.png_pic_center]  
首先我们需要一个主题，这个主题可以自由发挥，我这里就直接取名为前端知识图谱了。接下来要做什么呢，很简单，把你暂时能想到的大致类别添加上去，做个简单的分类，比如这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]  
搭建了一个基本的雏形，我们在这个基础上在进行一下归类，不同的方向也是存在联系的，比如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]  
这里可以根据每个人的想法划分，比如我觉得HTML,JS和CSS是前端的基本功，那我就把他们放到了一起。

设计模式、算法与数据结构和网络知识，我觉得不算是前端的专属，所以我把它们划分到了通用技能，主要是根据个人理解归类。

罗列知识点

在前面的划分基础上，我们下一步可以尝试在不同的分类下面，罗列你能想到的所有知识点。我们以JS这一项为例：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]  
你会发现知识点有很多，而且开始变得杂乱无章，最关键的是很难覆盖到所有的知识点，这个时候就需要进入到我们的下一步了，将这些知识再进行分层。

将知识点分层

将知识点罗列在一起，看似充实了知识图谱，但事实上每次回想到JS这块知识的时候，都只能通过死记硬背的方式回忆。所以最关键的地方就在于，我们需要找到这些知识点的相似点。

这一步比较关键，因为之后对这个知识脉络的所有操作，其实都相当于在重复这一步操作。比如我们这里的零散知识点怎么进行分类，我个人遵循的原则是：

先按照你想的分类，再去考虑是不是对的什么意思呢，就是你可以把作用域和上下文和闭包放在一块，归纳为执行环境。你也可以把原型链和继承并列，也可以把继承放在原型链下面作为延伸补充，但关键的是，任何一种分法你都有有你自己的理由。我自己先简单的分个类，大致变成了这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]  
你会发现知识点一下子变得层次分明了起来，抛开准确性来说的话，起码这是一棵按照你的思维生长的知识树，当你回忆知识点时，即使没有这个图谱，你也能再次重建起来。

同层知识点建立联系

最后一步，把同层的知识点通过某种关系联系起来，总之就是大开你的脑洞，这些联系可以是：

存在相同的特点

存在相反的特点

会结合使用

…

这一步主要是为了加强同层知识点的联系，让你在想到一个知识点的同时马上联想到另一个知识点。

如果你平时做过总结和对比的话，即使你忘记了这个知识点，也能马上通过另一个知识点回忆起来。我自己也简单的列几个例子；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]

emmm，虽然非常粗糙，但起码提供了一个思路吧~

补充知识点

到这里我们的知识图谱就已经初具雏形啦~

当然这只是个开始，接下来要努力去学习知识点，在了解到新知识的同时，根据个人理解把它归纳到知识树的对应位置。

如果你发现知识树中没有适合新知识的分类，那么恭喜你又接触到了了一个新的知识块，又可以壮大完善知识体系啦。在不断的学习完善中，你的知识体系也会变得越来越完善哦~

总结

本文分享了一下如何制作一份属于自己的知识图谱，每个人的理解都不同，所以别人的知识点目录可能很全但不适合你。

我的知识点分类仅作为一个例子供参考，还是需要大家自己尝试。根据自己的想法总结一份知识图谱不仅能帮助你梳理知识点，还可以拓宽学习的道路，让之后的学习之路更加顺利。

不要嫌麻烦，现在就行动起来吧~

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

写在最后

都看到这里了，如果觉得对你有帮助的话不妨点个赞支持一下呗如果哪里写的有错误也欢迎指出，也欢迎分享一下自己的知识目录

[2020100514482561.png_pic_center]: /images/20221123/26f84b44488b4d60be4c42d00c429ca3.png
[2020100514484133.png_pic_center]: /images/20221123/79ffc5aa238a4406a1cda4c3a71712ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d16cbcf8a80c424a82cb115ea6c224ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/32e9ad10b7fa416a8b557953b9ddb270.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/39a6a981d2844b9a873b19c922a8811e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/d3e3f4ff6b5c4e25ba0c60f1b800d339.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/741a9fdee4154a59af63bc52b7eafe11.png