2020 扬帆起航进击前端

╰半夏微凉° 2023-07-02 11:21 31阅读 0赞

## 2020 扬帆起航 进击前端 ##

![在这里插入图片描述][20200312085358120.gif]

## 01 序 ##

--------------------

从大三开始，这应该是我第二个年头开始学习前端了。说实话其实比想象中困难。从给网页穿上“朴素”的衣服到给网站穿上“华丽”的衣服，中间我经历了许多，再加上自学的效率难免会落下脚步。所以在新的一年里我会编写一些学习心得来帮助大家如何从一个前端小白逐步变成前端的大神。

## 02 目标 ##

--------------------

*  学习
 *  总结
 *  产出

我把今年的目标归为以上三点。

由于前端的发展非常迅速，我们应该时刻保持对前端的学习的热情，这也是我们为什么比35岁以上的人机会更多。人无再少年，好好珍惜活力满满，永不偷懒的日子吧！多看前端的专业书籍，基础的“三件套”以文档为主要学习途径，如菜鸟教程。后续单独写一篇关于如何选书的文章。

学习的过程不仅仅包含看书的过程，其实我觉得练习更是重要的一环。这也是老师和学生的区别，把别人教明白才是真正的学懂弄通。学习的基础上+刻意练习+量化产出，需要按步骤来。学习是一件慢事情，必须经过一定的积累才可以达到质变的过程。

还有一个很重要的学习方法就是"教学" , 在教中学习。这是初中一位生物老师所讲，非常管用的一个方法，这也是练习学习内容的一个非常重要的形式，达到查漏补缺的效果。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]  
第二部分就是总结部分了。我发现很多刚开始学习前端的小伙伴都会有一个习惯，就是不会总结，盲目学习。这就导致了效率低下的问题，学了后面忘了前面，但这并一定说我们总结了就一定会永远记得。想要对知识掌握到位还必须要加以刻意练习，就是我们说的代码练习。

那么如何总结呢？

其实我们很多小伙伴都可能会找一个笔记本，从头到尾列出知识点，然后对每个知识点都敲一遍。这种方法有效吗？当然有效，但是会浪费很多时间，我们知道程序员的时间就是生命，所以我们不建议这种学习方法。我入门前端以来可谓踩过不少的坑，而且还很愿意踩那种。

**1.切忌沉迷教学视频。**

因为开始并不喜欢看文档，不喜欢看厚厚的技术书籍，所以一天到晚都只会看看教学视频。不知道是不是老师时间多还是怕我们跟不上，前端的历史都给我扯半天，这种就是质量差的教学视频，不关注重点。但并不是质量好的视频你就会如鱼得水，关键你得会学。一般学习一项新的技能点，我一般都会从基础出发，把知识点粗略过一遍，知道有这个东西就好，不必深究。

跟着视频学习对我的帮助很大，特别是早期的时候，因为没有人带我走，所以都是摸着石头过河。可能有些同学踩到了深处便会原路返回，其实那只是一个小坑，并不是整个河流都这样。所以有成就，有产出，有效果才是前端人坚持下去的一个很重要的原因。这也是我们为什么对前端感兴趣的原因，重要是短期内有效果出来。

找一个质量好的视频，比如慕课网，对我的学习起到了不少的帮助。一点一点跟着敲，你就会有成就感，坚持就是时间和兴趣的问题了。把里面的关键技术拿小本本记好，重要的是他的思想逻辑，是怎么一步步到这里的。

**2.学会用脑图。**

学习是一个连续的过程，写在你的纸质笔记本可不是推荐的做法。因为你过几个月可能就忘了有这么一回事。我个人是使用百度脑图，里面可以编辑你的知识点，特别适合书籍的系统学习，你可以找一个文件夹专门放置你的学习内容，以后就只能在这里学，这样就会有一个知识库在这里。

里面的脑图不仅可以到处pdf，还可以导出图片，我们可以拿来做知识的查漏补缺。学习是有一个通性在里面，你学过的知识都会有联系的，大牛的知识就是把所有的知识都联系在一起，而不是简单的堆砌，这就是知识体系。所以为什么要建立一个知识体系对以后的学习发展有重大的作用。

除了脑图之外，还可以使用有道云笔记，也是一个很不错的笔记本，支持markdown编辑。善于运用软件，运用线上的知识，紧跟大牛脚步。相信你是不会差的。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]

最后一部分就是产出。所谓产出就是对知识的运用，知识你学了不用跟没学一样，关键是有用武之地。产出部门比学习部分重要，但是学习是基础，两者相辅相成。可能很多小伙伴都没有产出的习惯，学了就是自己的，也没有写博客逛社区的习惯，分享知识的过程中你会有更好的收获，相信我。

那我们该如何产出呢？

**1.写技术博客**

不用自己去搭建一个博客（要是可以就更好了），选择一个平台，CSDN或者掘金都是不错的平台，然后就可以开始你的表演了。可以写一些最近的学习心得，面试技巧以及黑科技工具的使用等等。写博客的好处有很多，不仅可以锻炼的表达逻辑，还可以巩固你的知识体系。两全其美，何乐而不为？

另外就是可以多逛一下技术社区，了解前端的动态，多关注最近出了什么新技术、新框架、新八卦等等。试着去帮别人解答一些问题，别人也很愿意去听，但是不要抬杠。乐于分享的心态比技术本身更重要。

**2.写项目**

找一个idea，把之前所学的知识点用一下，或者用新的知识来重构一下旧的项目，都是一种产出的方法。如果你担心知识不够牢固可以上一下github找一些优质开源项目，看别人是怎么写的。项目中要把用到技术的那一块注释出来，不然过一个月都不知道是你写的。

**3.交流心得**

要是可以的话，可以找同学一起交流最近的学习成果。技术学习的路上是枯燥的，找到相同的学习伙伴很重要，能够给你一种学下去的动力，两个相互切磋相互进步也是一种产出的方法。

面试。如果你觉得技术还可以，基础还不错的话就尝试去面试一下，面试官一般比你的层次高很多，知识储备也比你多，所以面试是一个非常重要的过程，还可以查漏补缺，完善自己的知识体系。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 2]

## 03 展望 ##

--------------------

2020是一个新的起点，对于快要毕业的我也将面临很多挑战和未知，也是一个进步、成长的一年。很荣幸今年拿到了一线互联网大厂的offer，在这一年里我将继续保持学习，期待自己能够取得更大的进步！

笔者最近开通了微信公众号，文章都会同步发送，大家可以关注一下哦，谢谢大家的支持！  
大家共勉！

![在这里插入图片描述][20200312085518250.gif]

[20200312085358120.gif]: https://img-blog.csdnimg.cn/20200312085358120.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200129134814609.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200129135005939.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200129135124937.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng==,size_16,color_FFFFFF,t_70
[20200312085518250.gif]: https://img-blog.csdnimg.cn/20200312085518250.gif