迟来的2020年度总结，顺带附上被鸽了很久的自我介绍

- 日理万妓 2023-01-01 15:47 144阅读 0赞

# 介绍 #

大家好，我是小澎，一个热爱**前端**的2021届的应届毕业生，大学专业是**安全工程**，不，不是网络安全，而是工程安全，所以我是非科班。今天呢，想跟大家介绍介绍我自己

# 如何进入前端 #

首先，我是怎么进入前端这个领域的呢？说来也挺有意思，因为今年前半年一直在家出不了门，然后就在家里思考我大学四年到底干了些什么，最后发现只有被老师组织去考来的 `全国CAD一级证书`、学校组织报考的 `普通话证书`和考了三次才过的 `英语四级`。咦？我到底有什么特长啊，感觉这些证书在手上好像不足以让我变得非常出彩，于是静下心来思考了很久很久，回想起当初高考时我的计算机成绩非常得不错（`注`：浙江当年是全国高考第一批改革，计算机是我的高考科目之一），然后就去咨询朋友，同时去网上查如何学习计算机，最后综合了各种因素后我选择了学习 `Python`，并准备在2020年的时候考一个 `Python二级证书`，因此我立马下单了一本Python二级官方指定的教程——《Python语言程序设计》，年初开始，我就在家疯狂地学习，可以说是早6晚12吧，就这样，我就延续上了我对计算机的热爱

![5a54d38a92a91d6b5318e9f04843c307.png][]

学完了Python的语言基础后，我知道我学习它的目的不单单是为了考证书，而是以后的工作，于是我在Python的众多发展方向中选择了一个我最最感兴趣的方面——**爬虫**哈哈哈，不得不说兴趣真的很重要，基于对爬虫的热爱，我每天花16小时以上的时间去`学习 + 实践`，这样的过程持续了3个月，期间我也写过很多的爬虫小脚本，例如`12306抢票脚本`、`斗鱼热门直播间信息收集`、`拉勾求职信息爬取脚本`、`淘宝秒杀脚本`、`京东、豆瓣模拟登录脚本`等等，说实话这些都是小打小闹，慢慢地我已经到达了瓶颈期，为什么这么说呢，因为我已经不局限于这些小脚本了，而是想去弄更厉害的东西，但发现大网站的反爬机制做的非常到位，导致我根本爬不动了。说实话，我很想突破这些反爬，把爬虫技术做得更厉害，后来了解到爬虫跟前端有着藕断丝连的关系，我连前端都不了解还怎么提升爬虫技术？就这样，我准备开始学习一下前端的相关知识

此时大约是3月中旬，我在bilibili上找了些许视频努力学着前端

![35303a200d52c9450edf27a57c2bd4b0.png][]

学前端的途中，我有想过以后我要从事的岗位到底是怎样的，爬虫工程师？这个岗位感觉不太靠谱，有一定风险。那……从事我现在学的前端？我学了一段时间的前端后，感觉前端还挺有意思的，能写出一些自己想要的网页就非常得有成就感

好了，这就是我进入前端领域的全过程了，还挺有意思的吧～哈哈

对了，忘了补充一句，我的 `Python二级证书` 自然是顺利拿到了

# 前端学习历程 #

既然开始了学习，那么我一定是很明确`两点`的：

1.  我对前端非常感兴趣
2.  我能长久地坚持下去

## 最初 ##

我就像大家一样，刚开始学习了前端标准三个技能 `HTML`、`CSS`、`JavaScript`，这期间都是全程跟着教学视频走的，所以时间特别的长，而且学的东西比较零散、不够有系统性，但我会把知识点一一记录在我的笔记本上，就像当初学Python一样，久而久之我似乎产生了一种无聊感，毕竟一直都是不断输入理论知识，没有进行实践过。

于是，我决定必须、立刻、马上要消除这种不良感觉，翻了一下当下做的比较好的页面，想必你们也猜到了，我选择了模仿**淘宝网**写一个静态页面，当然，用到的技术也就是只有我刚学的那三个基本技能，不过好像没有用到 `Js`

经历了大约一个星期不到？我就把半个淘宝首页给磨出来了，下面是展示图

![37d428bf671bdcdb656ecc20d4059ac9.png][]

页面比较大，所以没展示完整，大家可以点下面的链接预览完整的页面

[淘宝静态页面展示链接][Link 1]

当时老有成就感了，做出来完整的页面以后，我疯狂地给同学、爸妈分享哈哈哈哈哈

## 中间 ##

无知的我，以为学完了这三个基本技能以后就可以找到工作了，于是便拿起我之前做的**拉勾求职信息获取脚本**获取了很多前端开发的岗位相关信息，这才发现，我咋啥也不会？`Vue`是啥？`React`是啥？`ES6`是啥？`Webpack`是啥？`Node.js`是啥？博客文章还加分？

我的天呐，我感觉我之前学了个寂寞，说好的学了那三个就可以找到工作的呢。然后去网上查了查以上所说的都是什么，然后才知道原来还有框架这样的东西，`JS`还有版本这一说，代码竟然还需要打包，前端竟然也要会一些后端，竟然还有博客平台可以分享代码……

对于博客平台我还是挺感兴趣的，我第一个就去查的就是它，后来搜到一堆博客平台，在看了知乎上大佬们的建议以后，第一次知道了`Github`这个所有程序员必备的网站，说出来我不怕你们笑话，非科班的就是这样的，身边没有任何一个计算机相关的朋友，所有东西都是慢慢地了解的（其实这也挺难受的，平时遇到的问题都没办法询问并得到解答）话不多说我立马注册了`Github`，把之前自己文件夹里的代码都推了上去。

同时，我也注册了搜索引擎第一个搜出来的博客平台`CSDN`，并开始在上面分享我的知识总结。我在`CSDN`上叫 `Lpyexplore`，这个是我自己拼凑出来的一个非正式单词，`L`是我姓的缩写、`py`是 Python的缩写、`explore`是探索的意思，所以好多人都问我怎么读，其实我也不会啊，后来起了个中文名，你们就叫我**小澎**吧，寓意就是我能对生活、工作一直有着激情澎湃的感觉

不急不急，现在还早，一个一个学吧，于是我选择了当时网上最受追捧的`Vue.js`开始了学习，同样的，我是看的是b站上一个全套的教学视频（基础 + 项目实战大约70个小时）

u1s1，`Vue.js`对于当时的我来说，真的太友好了，语法简单明了，也不需要懂得太多就能快速上手开发一些简单的东西

最后用了一个月的时间，做出了一个`移动商城`的小项目，下面是预览图

![2e84bfe14499a8a34cc57d1def036e9d.png][]

想要看完整的项目预览的，可以点击下方链接：

[移动商城项目预览链接][Link 2]

感觉这个项目让我学到了很多，用到了`Vue全家桶`，很多新奇的概念在这里第一次映入我的脑海中。项目写完后，还有一件事让我印象深刻，那就是视频中老师用到了各种我没见过的语法，原来那就是 `ES6`，看到了它的重要性，我立刻去阮一峰老师的ES6相关知识的网站进行了学习，对一些常用的ES6新特性进行了一定的了解

在做`Vue`项目以及学习`ES6`的期间，我一直在`CSDN`上更新自己的知识总结，说实话每次网友给我提出问题跟我交流的时候，我感觉我都能学到很多东西，因为这也是一次对自己知识的回顾复习嘛。还有平日里看到博客会多几个粉丝关注，动力就又多了几分

只记得为了找工作我得了解一门后端语言，大家都推荐`Node.js`，因为只要会`JS`学起来就会特别地轻松

因此我就开始了`Node.js`的学习之路，从最初的用原生的语法搭建一个本地服务器环境到后来用`express`框架直接快速搭建，感觉框架真香，那些做出框架的大佬也太牛了，让我们站在巨人的肩膀上，学完了`Node.js`当然要做一个项目来巩固基础知识啦，我看了一下`node社区`这样的页面可以拿来练练手，正好我也没做过，于是便开始着手写一个类似`node`社区的网站

写完了页面，也用`Node`写完了所有的后端路由接口，也简单学习了一下如何用`mongodb`存储数据和读取数据，此时可以说是万事俱备，只差服务器了。因为不太懂得服务端的东西，也不知如何部署我的项目，于是在买完学生服务器（一年才90+元，特别便宜）后，没日没夜地查百度——如何在云服务器上部署`node + mongodb`项目，但实在是因为网上资源有限，没有任何一个完整的教程告诉我如何正确地去部署。最后的最后，我用`shell5 + 宝塔面板`完成了项目的部署，并且最后邀请了同学体验**注册账号**、**登录账号**、**发帖**、**留言**等一系列操作，并且我写了一篇博客告诉大家如何部署，避免一些网友会跟我一样的处境，很高兴，这篇文章也帮助到了挺多的小伙伴的

![62886111f86b533aa827a30f16c60191.png][]

以下是一部分网友的留言

![0891b60402f6b6f3ff1610c672c30ebe.png][]

说实话当时真的很开心，自己的博客竟然真的能帮助到别人，也正是因为如此，后来我在`CSDN`上输出了更多的用心原创文章

前期因为很多是跟着视频教学进行学习的，我在平时逛别人的文章时也逐渐意识到了自己很多知识的匮乏，因此我去买了几本前辈用心推荐的`JavaScript权威指南`和 `JavaScript高级程序设计`，我想通过书籍来帮助我系统地学习，然后把自己所理解、总结的知识分享给别人，这样也可以帮别人少走一些弯路

## 瓶颈期 ##

之后的大部分时间，我几乎都是在**看书**与**写博客**之间度过。渐渐地我不知道是应该继续去学习别的新技术还是巩固复习基础知识，而且此时的我觉得，自己也做过大大小小的个人项目了，总应该可以找个合适的实习工作了吧，于是便在手机上下了好多个招聘软件，疯狂地投递简历，我自然是很向往大厂的，所以刚开始略微有点眼高手低，投的全是杭州的一线大厂（因为我老家是浙江的，所以也非常向往在杭州工作），不过不知是什么狗屎运，没过多久我就在`Boss直聘`上收到了一个阿里大佬的内推邀请，那给我高兴的呀，因为那可是我收到的第一个面试邀约，而且还是阿里的

![f2c5f5a61322fd9d69cdffcfb4c01911.png][]

刚接受了面试邀约，就接到了面试官的电话确认，问我何时有时间进行一面，我其实内心比较没底，所以特地往后拖延了一天，想要用一天多的时间多准备准备举基础知识。其实我还心里暗暗自喜，阿里内推竟然可以不用笔试

到了一面的那天，我是非常紧张的，毕竟第一次面试嘛。面试流程呢也非常简单，先做个简单的自我介绍，然后发给我邮件一个在线做题的链接，最后再问一些项目上的问题

整体面试下来，我感觉我做的不是非常好，因为很多基础的问题都因为紧张而忘记或者做错了，而且在问项目时，面试官问的是我那个`node`项目，问我有了解过`xss`吗？有做过数据库的安全问题吗？当时我就愣住了，这都是啥呀，因为问我啥，我都不太回答得上来，面试也就很快地结束了

不过我还是很爱回顾总结的，我心里很明白这次面试我哪里做的不好，回去就把回答不好的问题以及完全不会的问题都梳理了一下，例如：`手写防抖节流`、`手写深拷贝`、`xss是什么`、`csrf是什么`……

后来结果就很明确了，一面也直接挂了。其实我还抱有意思幻想，给我一个二面机会，然后面试官重新问我一下在一面中我回答不好的问题，害，是我想得太多啦。

## 奋斗期 ##

经历了上述的阿里面试，我才知道想要进大厂没那么容易，所以重新想办法调整自己的学习进度，提升能力。忘了是什么途径了，接触到了开课吧的大圣老师，看到他的学习态度，我是直呼好家伙啊，感觉那种快乐读书学习的感觉太棒了（下面放上一张大圣老师某天早起的学习图）

![bea8cb9b591848a6b0d665dea13d9241.png][]

你看到这样的图难道没有感受到学习的快乐嘛，反正我是有了，并且我也模仿大圣老师的学习状态，一直坚持着，后来通过图书馆借的书、自己买的书，对前端的了解越来越多，不能说精通吧，但我感觉我是一直在进步的（找了一下相册里之前拍的宿舍里书架上的书的图片就只有这一张了）

![c52dedd811472564ed15408cbc62fec4.png][]

通过这样一段时间的努力学习，我感觉自己的技术有了很大的提升吧，于是又萌生了找工作的想法，但回头看看我的项目经验似乎仍只有我那个`node`和`Vue移动商城`，感觉拿不太出手。为了有个体面点的个人项目，我决定去模仿`element-ui`做一个组件库

说干就干啊，之后的一个月就全在忙这个了，大概初步写了12个组件（有些是完全模仿，有些是自己奇思妙想出来的），然后我也想把我的组件通过文档的形式展示出来，所以就用`vue`手撸了一个自己组件的官方文档，下面是预览图

![5612eb71fc1310f415f062016e6fab88.png][]

![cde7baa0dbaa5ff2b7c7b72b97ba9da1.png][]

要是想预览，可以点击下面的链接啊（做的有点Saoz，弄了一些可有可无的动画效果，可能有点兼容性的问题，建议大家用chrome）

[组件库官方文档展示预览链接][Link 3]

说实话，组件做得不费劲，这官方文档当时给我累的够呛，因为这文档中最难实现的就是`markdown解析`以及`代码高亮`的效果了，我当时好像是查了很久很久的资料和无数次失败的尝试才完成的

好了，又一个项目完成了，可我似乎又面临了另外的问题，马上秋招了，秋招面试就要面临很多的笔试，我连数据结构与算法都没学（当时只会在高中学习了的队列和栈），怎么参加秋招啊？于是便又开始了一个阶段的学习——`狂补数据结构与算法`

记不太清学了多久，反正我是边学边写博客总结，最后整理了一个完整的**数据结构与算法JS版**的专栏，也很高兴获得了很多人的指点纠正与认可，在`CSDN`上这个专栏将近获得了`16w+的访问`和`6000+的收藏`，同时在`Github`上也获得了34个`star`

感兴趣的小伙伴可以看一下：

[数据结构与算法文章专栏跳转链接][Link 4]

[数据结构与算法JS版代码跳转链接][JS]

那段时间真的动力很足，因为几乎每时每刻打开`CSDN`都是`99+`的消息

![85129b5ed33993ef4bbf7a100ae68d1f.png][]

其实在补数据结构与算法知识的期间，秋招早就开始了，但是那种还没学完数据结构与算法，但非常想秋招投简历，然而又没有底气去面对笔试的心情你们能懂吗？所以就这样一直等到补完知识后，我发现秋招几乎是接近尾声了，于是连忙投了一些公司，也算运气好赶上了一部分公司的线上笔试，但问题远远没我想的那么容易，因为从没做过线上笔试并且也没刷过`leetcode`，我对线上的算法题的流程不太熟悉，更难的就是算法题的很多的边界情况考虑不周，导致无法整题`AC`

也没发怪谁，这时间太紧迫了，我只好自己线下多去刷刷`leetcode`，为春招做准备了，不过好歹是有收获的，起码熟悉了线上笔试的流程，也体验了笔试的紧张感，再下次就不会胆怯了

## 现在 ##

因为错失了最好的秋招机会，我也没有去找个公司实习（其实是我自己眼高手低，非大厂不进），我就继续在家研究我的前端技术。在今年`Vue`正式迎来了它的新版本`Vue3`，我也第一时间去了解了新特性，总结了一篇博客，同时把`学习Vue3`这个任务加入到了我的**学习计划队列**中

随着我学习计划队列的缓慢进行，`Vue3`的学习被鸽到了11月份初。在11月初开始，我边看`Vue3`的官方文档，边看其它大佬的介绍总结，差不多对`Vue3`的使用有了80%的掌握，同时也整理了一篇比较详细的`Vue3使用教程`和一个补充篇，哈哈写的比较菜，大家别介意

[快速使用Vue3最新的15个常用API][Vue3_15_API]

[关于Vue3获取当前组件实例的 getCurrentInstance 方法的补充  
][Vue3_ getCurrentInstance _]

接下来做的事情自然是做项目啦，学完知识不做项目巩固，那知识没过多久就会被遗忘

说干就干，我又开始思考到底要基于`Vue3`做一个什么样的项目，最后决定做一个**网址导航栏项目**，具体是为啥要做这样一个项目，我都在其中一篇博客里写过了，这里就不再多做解释啦，大家可以去我博客里看，下面放上链接

[自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）][Vue3]

这是我项目第一版所有内容的总结博客，很开心在掘金平台获得了大家的喜欢和建议，截止目前该项目在`Github`上已经有51个`star`了，也经常会有小伙伴给我提提意见，我也非常的开心。感兴趣的小伙伴可以点下面的链接进行预览或者源码的查看

[项目预览（pc端项目，记得用电脑点开）][pc]

[源码查看][Link 5]

目前，我也仍在对这个项目进行不停地迭代优化，现在已经新增了**拖拽排列功能**，以后这个项目也会一直维护下去，因为这个项目是我平时经常用的东西，也希望大家多多参与到这个项目中来，其实平时给我提提意见就很感激了

相信大家对`Vue3`的`Composition API`有着深刻的印象，它的出现是为了使同一功能的代码聚合在一起从而便于代码的维护，而我在项目的开发过程中，感觉并没有很好的利用这一特性，即没有对代码进行抽离。在这期间，我也在掘金的沸点中询问过大家的意见

![4833d30fa6ba385cbfcbe0f4c810c998.png][]

也有不少人给我提了意见，我也仔细思考并结合多个掘友的意见，对我的项目进行按照功能抽离代码管理

![59330fb3a6937e064e949ea5139ada9a.png][]

![c29261de066e1f15d8bea7e7c08fdd9e.png][]

截止2021年1月1日，我已经对整个项目的代码按照功能进行了全部的抽离，现已经上传到了`Github`的`master`分支上，在元旦期间，会马上更新出我对于自己`Vue3`项目的代码抽离管理的思路以及做法，希望大家到时候能给我多提提意见

为了春招的顺利进行，其实我在做这个`Vue3`项目时找了杭州一家公司实习着，在公司主要负责的是`taro/react`的小程序项目，说实话跟我之前自学的技术栈出入有点大，不过好再有一定基础了，熟悉起来不麻烦，大概5天的时间我就能自己独立上手完成一些业务了，12月的时候，我也独立完成了新功能的全部功能迭代，我感觉还是非常不错的

## 以后 ##

目前实习只是为了增加项目经验以及多人协作的经验，春招再战才是我真正的目标，正好这个阶段公司的项目业务也已经算比较成熟了，我可以花更多的时间在准备春招上了，这段时间可能会很辛苦，但这都是必须的，毕竟非科班出生，起点比别人低，那么就得付出比别人高好几倍的努力

# 对于前端的看法 #

其实，我对前端是非常感兴趣的，否则我也不会这一年都在没日没夜得学习。很多人都问我，你这么拼，难道不会累吗？我都是这么回复他们的，支撑我的就两点，**兴趣**和**心态**。**兴趣是第一驱动力**，这是我的座右铭，同时我也把它写进了自己的简历里面，如果连兴趣都没有，如何能快乐学习呢？其次是**心态**，想必大家在学习过程中都会遇到这样的情况：遇到了一个想破脑袋都想不出的问题，然后纠结了很久很久，不知所措。那么我面对这种情况的时候，所做的选择是：如果已经花费了很多时间但仍无济于事，那么就先放下它，可以去做一些便于放松的事情，例如听歌或者刷个抖音啥的，因为如果再继续纠结下去，只会越来越焦虑，但问题却得不到很好得解决。之后等你心情比较愉悦了的时候再回头去看看当时的问题，说不定就茅塞顿开了。

# 2021年计划 #

那首先肯定是进一家心仪的公司，从事前端开发的工作；其次就是希望自己的技术越来越牛X啦；今年下半年注册的掘金，感觉这里的氛围比CSDN活跃，质量也比较高，所以从今以后还请大家多多关照啦，我叫小澎～

[5a54d38a92a91d6b5318e9f04843c307.png]: /images/20221120/da3680c05c0544c6aa6e519f5a384b1b.png
[35303a200d52c9450edf27a57c2bd4b0.png]: /images/20221120/6294ba1169c946d08da985d97020c425.png
[37d428bf671bdcdb656ecc20d4059ac9.png]: /images/20221120/cccac09f701e4a578c8e6425c948a32d.png
[Link 1]: http://lpyexplore.gitee.io/taobao_staticweb/
[2e84bfe14499a8a34cc57d1def036e9d.png]: /images/20221120/17654789d60b47cda741509403886a2a.png
[Link 2]: http://lpyexplore.gitee.io/mobile-mall---project-display/#/home
[62886111f86b533aa827a30f16c60191.png]: /images/20221120/f5300303af174a8b819686fcbfc4fd99.png
[0891b60402f6b6f3ff1610c672c30ebe.png]: /images/20221120/ba087639497c4d7cbabca2733ca7b5bc.png
[f2c5f5a61322fd9d69cdffcfb4c01911.png]: /images/20221120/d075f2fd81bc4bb3aec9e7ceab68c311.png
[bea8cb9b591848a6b0d665dea13d9241.png]: /images/20221120/35c6db9b0cbe4cc6be69c0644a229fed.png
[c52dedd811472564ed15408cbc62fec4.png]: /images/20221120/ffe32ef1bdbb4cfabd1ee2adc6f2efce.png
[5612eb71fc1310f415f062016e6fab88.png]: /images/20221120/a547c04408ef4184b7dd898a44b5b392.png
[cde7baa0dbaa5ff2b7c7b72b97ba9da1.png]: /images/20221120/15162cba62034bb0b7cdea5b90a6811e.png
[Link 3]: http://lpyexplore.gitee.io/lpyexplore-ui-documentation/#/components/rate
[Link 4]: https://blog.csdn.net/l_ppp/category_10193125.html
[JS]: https://github.com/Lpyexplore/structureAndAlgorithm-JS
[85129b5ed33993ef4bbf7a100ae68d1f.png]: /images/20221120/67b83db86e6d47da87c6a34f9e2b76fb.png
[Vue3_15_API]: https://juejin.cn/post/6897030228867022856
[Vue3_ getCurrentInstance _]: https://juejin.cn/post/6901087576195760141
[Vue3]: https://juejin.cn/post/6904494023554105358
[pc]: http://lpyexplore.gitee.io/nav-infos/
[Link 5]: https://github.com/Lpyexplore/nav-url
[4833d30fa6ba385cbfcbe0f4c810c998.png]: /images/20221120/dbf5e5a2cd5a4b03a13dfbb4062e0936.png
[59330fb3a6937e064e949ea5139ada9a.png]: /images/20221120/c44b2c68bdcd41dba5ceebbb6cdbd6cb.png
[c29261de066e1f15d8bea7e7c08fdd9e.png]: /images/20221120/9a67d799fbfc465c845667b7c73ed54a.png