大二结束！作为非正式前端的我这半年干了什么？

「时光不负，创作不停，本文正在参加2022年中总结征文大赛」

我是小小蒙，准大三，非正式前端，正在为成为一名正式的前端工程师而不断努力

这半年，我这个非正式前端干了什么？

翻一翻手机照片，发现这个学期我拍的照片少地可怜，一方面是可能因为封校，另一方面是因为到了大二已经失去了刚上大学的那种新鲜感，没有了随时都要拍照留念的习惯。事实证明，不拍照虽然节省了手机内存，但对年中总结来说显然不是一件好事，我回忆了好久，才把这半年我做的事情总结完毕：

• 组织新生的寒假研学
• 参与组织开源社区
• 参加字节跳动的青训营
• 组织寒假项目评比展示
• 学TS，写了我的第一个npm包
• 赶项目！！！
• 学后端，肝完了Spring
• 学习React-Hook
• 教新生Vue
• 参与数字校庆的工作
• 摆烂
• 肝课设
• 去打蓝桥杯的省赛&国赛

(才发现自己上半年干了这么多事)

组织寒假研学和开源社群学习

我在学校的组织每年寒假都会组织大一成员进行线上研学，学习Java,前端，python，人工智能，OS/CPU方面的知识，并在寒假的后半段去完成一个项目，这个项目根据方向不同，形式也有所不同，就我所在的全栈方向，寒假的任务是配合java/python方向的同学去做一个前后端分离的项目。

（对我们的组织好奇的小伙伴可以戳戳这个：云顶书院_百度百科 (baidu.com)）

去年我作为小萌新参与其中的时候，一方面第一次做项目，充满了激情与新鲜感，另一方面，也被对接口折磨了好久，对着axios的文档跟后端的同学一点一点地试着对接。同时，我们去年的项目是用原生JavaScript配合cdn引入的Vue完成的，但寒假的学习时间有限，寒假前又只学到了JavaScript的简单运用，根据我去年的经验，如果直接去学Vue,一方面会导致基础不牢，另一方面，也容易导致大家对前端的知识结构不清晰，学的很迷茫。因此，我决定，在今年的寒假放弃Vue的学习，新生的项目采用原生的JavaScript+axios来完成。

同时，去年我们的学习JavaScript的形式是看着B站的网课，然后去记笔记提交。这样就导致了很多人在学习期间疯狂划水，然后卡着截止时间提交笔记，造成在做项目时啥也不会的情况。今年我来负责带新生时，不希望再看到这种情况，因此我决定：弃用往届的学习路线和学习方法，自己结合实际来写一套JavaScript的学习路线。

我的想法是，把JavaScript的各个难点，融入实际的开发demo中，让大家能够理解这个知识在实际中的用法，同时，将原理性的东西暂时放下，优先学习可以实际运用的知识点来提高大家的兴趣

上面这个是我们的开源仓库，用来进行作业提交，学习资料管理和作业的发布提交。同时，这个仓库也作为一个开源社群学习平台进行开源，除了我们组织的成员，还有很多对它感兴趣的小伙伴也在参与。

这里补充一点：寒假我干的另一项事情，就是对这个开源社群学习平台的全栈模块进行了资料的完善和维护。其中维护仓库绝不是一件有意识的事情。因为新生基本都是寒假才学会用git的使用，提交错分支，把仓库覆盖掉之类的事情层出不穷。为了保证大家提交顺利，我们经常得紧急回滚，修复仓库。不得不说，这一个寒假整下来，我git的水平提高了不少

（有兴趣的话可以来看看哦：云里云外开源社区）

说回组织寒假研学的事情，作业布置是布置完了，总不可能每次任务提交结束后把答案一发让大家自己看吧，不然又会搞出一大批摸鱼的人，因此每次作业我都会在飞书上去给大家讲一遍。另外，之后开始做项目的时候，很多组都不会做需求分析，我也会一个组一个组地去引导他们做需求分析，给他们引导他们思考怎么在项目开始前要做什么工作，要怎样用git进行协作，怎样进行对接，包括我们这些大二的也经常会开会讨论接下来的学习进度怎样安排…..总之，这个寒假开了超级多的会，飞书打开的频率比QQ微信都要高

（飞书上一些视频会议的记录，这样的会一个寒假大概开了30多场）

组织研学与带新生确实是一件很麻烦的事情，寒假里我基本每天早上起来我的QQ的消息都会爆满，问我问题的，催我发学习任务的，通知我开会的，给我说仓库又炸了的….几乎时时刻刻都要忙着回复各种消息，甚至跟朋友出去玩也要抽时间回答新生的问题。最忙的时候甚至同时给四五个新生解决问题。但那时我真的很快乐，因为我看着他们的技术渐渐远远超过了去年的我，看到了开源社区渐渐做大，看到很多人发自内心地喜欢上了编程，喜欢上了前端，那真的是一件很有成就感的事情。

参加字节跳动青训营

寒假的时间其实我也并不是把全部的时间都用在了组织研学和开源社区上。在寒假开始前，我的一个学长给我们转发了字节跳动前端青训营的消息，于是抱着试一试的心态，我去参加了进阶班的考试

题目还算是比较简单，选择和简单难度不大，算法题差不多是力扣简单和中等的难度，我记得我当时好像是有两道题用例没有完全跑通。第二天看交流群里大家都在说题目简单，觉得大概率要G了，结果却意外收到了入营通知

（当时真的超激动！）

于是，带着侥幸，我进入了青训营。刚进去的时候，要为之后的大项目进行组队，大家会填一个表去写自己的技术栈，不得不说，里面确实是大佬云集，左手React,右手Spring的大佬一抓一大把，而后端水平只够写个接口的我在里面就显得相当的菜菜。幸运的是，我的学长也在里面，这让我比较放心，至少还有学长带我

但万万没想到，我联系到学长试图抱大腿的时候却被告知：我的学长已经过了字节跳动的面试，寒假要去字节实习，时间比较紧。至于大项目的事情嘛…..他表示他很相信我

于是，我只好又找了两个看起来还算靠谱（注意措辞）的小伙伴来组队，正式开启了我的青训营生活

不得不说，青训营确实让我学到了很多东西，第三天讲JavaScript的时候，月影老师用插件化的方式写轮播图就让我当场傻眼，直接改变了我写JavaScript的思维方式

【前端冷知识｜刷题打卡活动】Day 8 – 答案解…-青训营社区 (juejin.cn)

还有前端动画那一节，用JavaScript的requestAnimateFrame去封装异步动画函数，是我之前完全没有想过的方式，后面的webpack，可视化，three.js都大大拓宽了我的视野，让我了解了很多之前完全没有接触过或比较生疏的内容

但是说来惭愧，最后做项目的时候我还是比较狼狈的，因为还要管寒假研学的事情，导致我是年后才开始准备笔记和项目的，而这个时候我当时找的两个“队友”都跑路了，而我学长的工作又比较忙，导致项目的大部分工作都是我一个人完成的

我当时准备的项目是一个前端知识点可视化的项目，当时的想法是将原型，异步，事件机制这些比较复杂的内容用动画的方式去做一个呈现，一方面是向用一下青训营里讲到的JavaScript封装动画函数的方法，另一方面，也想的是之后给新生讲这些内容时，可以用它来做一个展示 当时把笔记补完后，留给我的开发周期只有不到四天，但我还是花了一下午的时间把动画函数的内容重新过了一遍，并自己封装了一个支持promise链式调用的动画函数，事实证明这个决定还算是比较明智的。因为之后我疯狂三天不眠不休地编码，到了最后基本丧失了思考能力，全靠肌肉惯性敲代码，得益于动画函数的傻瓜式调用，才让我在deadline之前把项目赶完。

（动画效果还是很丝滑的，静态图不是很有灵魂）

说实话，我个人觉得三天的时间做出这个东西我还是比较满意的，之后答辩的时候评委问我有没有考虑过把这个做出可以自定义管理动画的，说实话这个我还真想过，但奈何时间（技术）有限，没有整出来。最后评分的时候名次是第11（前10名能进终评），有点小遗憾，但说实话前面几个项目确实比我做出来的要优秀的多，有一个大佬用three.js做了一个简单的MC，属实是把我震惊到了

青训营真的让我学到了很多东西，见识到了很多厉害的人，它真的是一段很难忘的经历

最后晒一下我的证书（虽然长途跋涉让它的身形变得扭曲，但我还是很爱它）：

寒假项目评审

转眼到了开学，按计划开学的第一个星期就要开始寒假项目的评比了，但很多组的进度还是卡在了对接上，甚至还有组到了临近开学还在修改设计稿，为了让大家都能完成项目展示，我除了上课，基本所有时间都在基地去帮新生解决问题，在验收前一晚上，一个新生为我能不能让他留在基地通宵改代码，我同意了，那天晚上，我陪他们在基地坐了一夜，第二天，我从座位上醒来，看到周围新生将基地围满，他们都在讨论着项目怎么做，在问着其他学长问题。我从座位上站起来，摇摇晃晃地穿过他们，听着他们的讨论，走过走廊，那一刻我感觉到我一个寒假的忙碌是有收获的，我感觉我好像可以尽我所能，让这个地方充满了生机与活力，让这个地方变得更好

后面的项目评审，说实话让我有了一种面试别人的感觉，去参加了一次项目评审之后，我好像理解了一点面试官会怎样问别人项目方面的问题，可能会从哪些方面问问题，让面试官满意的回答又是怎样的，说白了面试官是想知道你在这个项目中有没有深入思考，有没有解决问题的能力。而作答也应该体现出你解决问题的方法和对问题的思考，不一定解决方案要完美，但要让面试官看到你的思考过程（业余面试官，不对请指正啊）。

最后放两张优秀项目展示的照片

（ps:项目展示完大部分小组都去聚餐了，因为封校所以只能在学校里，导致那天中午学校的麻辣香锅店被我们承包了）

学TS，写了我的第一个npm包

在开学到最后项目展示的这两个星期里，我除了帮新生解决问题，也开始鼓捣自己的项目——一个npm包了。所实话从去年暑假开始我就想着能写一个自己的npm包并发布到npm上了。但去年暑假的时候我基本只会对着脚手架写业务代码，webpack基本一窍不通。完全不知道怎么搞。但大二上学期的时候，我已经学会了webpack的基本配置，并且把axios的源码看了一遍，差不多知道了大概应该如何写一个npm包了，再加上寒假开始接触了一点TS，我觉得可以开始动手了，于是我一遍开始深入学习TS，一遍开始了写npm包之旅

这里安利一篇掘金上的TS教程，当时看完真的受益良多：

一份不可多得的 TS 学习指南（1.8W字） – 掘金 (juejin.cn)

因为是第一次写npm包，因此我选的题材比较简单：一个对localstorage的封装，能够实现设置过期时间，存储对象，批量存储，设置读取次数，动态清理的功能，并且可以通过插件的方式跟其他库协作工作，实现支持多种日期设置格式

项目地址：

sprage.js: 一款基于localstorage的轻量级本地存储工具(gitee.com)

自己写npm包真的是一件很有成就感的事情，在这个过程中对webpack和npm有了更深入的理解，而且第一次收到npm发来的全英文邮件怎么还有点小激动的感觉呢

目前这个npm包的下载总量是464（虽然一个star都木有0.0）

赶项目！！！

项目评比完成后，大创，挑战杯，互联网+的比赛基本上都陆续开始了，而我所在的团队的项目却还在赶工阶段，还有几个接口没有接完。但大创的评审让我们在四月初提交项目材料。我们的项目是一个App,提交的东西是apk包。所以这个时候我们开始了飞速的对接口，赶工。

当时我压力巨大，一方面要对接口有一个地方是要做多级评论回复，以前没有做过这个东西，另一方面React-Native的打包属实是把我整崩溃了，经常连着报一堆错误，解决完一个又蹦出来一个。好不容易打好包了，进去又是白屏，解决了白屏，在真机上又装不上了……有那么一周，我天天睡在基地，除了上课吃饭，就是在github和StackOverFlow去找打包问题的解决方案，然后对着安卓的配置文件研究（感觉当时都快把原生安卓学了一遍了），最后打包成功在真机 上运行的时候简直泪目

说实话自己完成打包也少不了淘宝商家的贪婪和自己的贫穷 

打包完成，接口对完剩下的就简单了，要做的就是每周去跟负责策划部分的同学开会交流，补充策划书的内容，完善PPT.（终于不用再住基地了，那里晚上真的好冷0.0）

学后端！肝完了Spring!

随着前端学习的深入，我越来越觉得了解后端是一件必要的事情了，同时，我们这学期javaWeb会一个课设需要用Java去写后台。在诸多条件下，我决定开始Spring的学习

说实话，我java的基础实属一般，除了之前学校里学的内容（学校教的水平懂的都懂），知道一些Java的常用方法，看过servlet的网课，除此之外我对Java的知识基本一无所知。但一年半的开发经验还是让我对自己的学习能力有一定的自信，毅然决然地从Spring开始学起。 当时看的教程是这个：

黑马程序员2022最新SSM框架教程_Spring+SpringMVC+Maven高级+SpringBoot+MyBatisPlus企业实用开发技术_哔哩哔哩_bilibili

Mysql的教程看的是这个,看+敲代码+记笔记大概用了两周

黑马程序员 MySQL数据库入门到精通，从mysql安装到mysql高级、mysql优化全囊括_哔哩哔哩_bilibili

说实话刚开始确实比较困难，什么IOC，AOP，一大堆之前学express完全没听过的东西整的人很懵，需要边看网课边查资料，到了MVC和Maven的部分时，就基本找到了之前学Vue的感觉了，后面基本就学得快得飞起了。边看网课边选择性地敲代码，差不多两个星期过完了Spring+SpringMVC+SpringBoot+Mybatis.说实话很多概念性的东西还是不太理解，但使用已经问题不大了。

话说注解和AOP让我产生了极大的兴趣，学完Spring之后，我就开始研究能不能在不用TS的前提下在Vue里使用注解（用JavaScript的解释应该叫装饰器），最后还真弄成了一套跟SpringBoot里@PostMap类似的api注解

（用@Api注解可以将一个方法修饰成请求的回调函数方法，避免了链式调用）

后端很多东西是真的有意思，感觉一个合理的后端架构利用接口的实现和方法封装基本可以保证架构者可以主导项目的进展与结构，这一点比JavaScript飘逸的风格要好的多

重学React

react我去年是浅学过一遍的，但说实话当时学的并不深入，而且后面主要写的是react-native，使用的技术栈是React-native+react-navigation+mobx,对于用React构建Web页面还是很虚的。而且看到掘金上全网都在吹React-hook.这不得来入手一波？

当时看的教程：

尚硅谷React教程（2022加更，B站超火react教程）_哔哩哔哩_bilibili

大概用了一周的时间全勤学React，因为当时其他事情忙完了，那一周课又少，基本可以全勤来肝React，再加上之前有基础，很多地方直接开倍速过了。用了5天的时间就把这个课过完了，其他的东西都比较好理解，redux确实是有点困难，感觉不如Vuex和Mobx那么直观。

周末用React-hook的语法把项目的一部分模块做了重构，不得不说React-Hook的语法是真香

教新生Vue

这学期新生的学习任务是Vue，而对Vue的学习，我依然是弃用了之前看视频的方式，让他们看文档+做Demo来学习，而我为了把Vue给他们讲清楚，每周六会从下午四点开始把下一周的任务设计好，然后对着文档仔细研究这周任务的知识点，七点钟在飞书上讲本周的作业

（一些讲作业的会议记录）

不得不说，学习一个知识最好的方法就是把这个知识给别人讲一遍，为了讲清楚Vue，我算是一个字一个字地把Vue的文档又过了一遍。这么仔细看文档的收获是真的很大，以前不理解，或者含糊不清的地方在仔细看了一遍文档之后瞬间变得清晰多了，像自定义指令，过渡动画这些内容，我以前基本只停留在了解的层面，为了给他们讲清楚我也都仔仔细细地学了一遍。为了解释清楚数据的响应式，双向绑定，虚拟Dom，我也去掘金上看了很多相关的文章来学习。一个学期下来，给新生讲过一遍Vue后，我感觉我对Vue的理解也算是上了一个台阶

参与数字校庆的工作

这个学期，我们学校正在开展120周年校庆的活动。四月中旬的时候。校庆办的老师找到我们组织，让我们出一批前端的人来参与数字校庆的工作，于是我们几个大二老油条带上两个新生，成立了数字校庆工作小组，来完成数字校庆的工作。

整个数字校庆的工作大概分为两个项目，第一个是做一个大数据活动展板，这是一个比较简单的大屏项目可视化项目，主要是要把动画做好，然后有移动端适配；另一个是做“云祝福”，要收集校友的祝福并展示，同时要做一个3D地球可视化的效果。

这两个项目应该是我第一次负责的需要正式要上线并大规模投入使用的网站项目（之前做的很多都是内部使用的项目或练习性项目），作为团队里面还算比较靠谱的前端（bushi），我主要负责搭架子，移动端适配和性能优化的部分

搭架子还算是比较简单，因为之前做的项目是有一个封装地比较完善的脚手架的，基本改一改就可以用了。移动适配也还算简单，因为页面结构不是特别复杂，基本简单的媒体查询就可以完成。但性能优化说实话之前虽然也了解过不少，但没有正式在项目中应用过，再加上第一次项目整合完成后，打出的包的大小高达27MB，于是我不得不开始着手性能优化的实践，具体做了以下的优化：

• 对所有图片进行了压缩，并且挂到了CDN上，减少包体积并加快图片加载
• 对无限滚动的列表数据进行分批次加载和懒加载，防止一次请求过多数据
• • 对element和echart进行按需加载
• 路由组件全部使用懒加载
• 取消webpack自带的预加载，只加载当前页面的文件
• 配置取消了打包的.map.js文件，减小打包提价
• 配合后端开启gzip压缩
• 进行分包加载
• 利用webpack删除注释和console.log，对HTML,CSS,JS进行压缩
• 优化babel配置，复用babel辅助函数
• …

最后把原来27MB的dist包优化成了500KB，首屏加载从两秒优化成了0.6秒

（性能直接拉满怎么说）

后面校庆办的老师也很满意，直接按照校庆志愿者的标准给待遇，另外给我们算了120个小时的志愿时长

校庆志愿者证书好好看！

摆烂

如题，忙完一大堆事情后狠狠地摆烂了一个星期，而且当时我们学校因为疫情开始上网课了，导致那一个星期我基本天天起床把网课一挂就开始上号LOL，基本连宿舍门都不想出

挂一张当时拿到久违的5杀的图

肝课设

摆烂一时爽，一直摆烂一直爽（bushi）,短暂的摆烂结束后，还是要开始正事，那就是开始肝javaWeb的课设。

这个项目本来是一个小组5个人一起完成的，但我的四个队友都在长期摆烂，因此这个项目最后基本是我一个人全栈开发完成的，项目是一个在线聊天室，技术栈是SpringBoot+Vue+MySQL

前端还好说，毕竟是老本行，一天半的时间基本上就把页面写完了，用Mock自己模拟数据测试一下接口，写写交互逻辑，基本上两天的时间就完工了

后端因为是第一次写SpringBoot的项目，还是比较生疏的，虽然之前对着视频敲过demo，但正式上手的时候还是有点一头雾水的感觉，解决跨域，上传文件，对象转JSON……好多东西课程里都没有讲过，只能自己看其他博客摸索，从写一个简单的接口开始，一点一点尝试。用了两天的时间，基本上把增删改查这些简单接口都写好接上了

但实时聊天的功能却迟迟没有进展，当时选题的时候，我自信满满地选了一个web聊天室的系统，想锻炼一下自己的后端能力，但眼看验收时间逼近，我现在只想把它换成一个简单的crud项目（哭哭）

当时急得不行，却又没有头绪，网上的代码虽然可以跑通，但跟我的场景却不一样，不能直接修改使用。最后我从github上下载了一份类似的代码，研究了两天后才把这个功能做了出来

最后实现的效果：

做之前感觉这个不就是用websocket做个通信吗，但着手之后才发现，要考虑用户不在线的消息缓存，要考虑一方断连接的情况,要考虑多个用户同时发送消息的并发情况….(当然上面这些我都没做出来，后端水平实在有限，只能搞出一个简单的版本0.0)。感觉到后端的世界我只接触到了九牛一毛

之后我又花了三天的时间写了一份一万多字的实验报告，把项目的技术难点，技术栈，封装方法，项目规范都介绍了一遍

（报告大纲，后面的小组会议全是编的，就一个人做哪来的会议？）

本来感觉我这个项目虽然问题不少，但吊打其他小组用servlet+jqury写的项目应该问题不大。结果到了验收的时候发现，一方面好多组都是从淘宝上买的课设（有个大冤种花了2000在淘宝买了一套，搞得我都想去卖课设了），另一方面，老师压根不问那些技术的实现难点，问的全是诸如如何建表，表单提交，有没有验证输入这一类的问题，甚至都没有亲自测试一下，让你当着她的面用一下就可以了。最可气的是我当时为了赶时间，没有对邮箱的合法性做验证，结果老师不问实时聊天的实现方式，怼着我没做验证这一点使劲薅！（这个真的好气！！！）最后分数88，并不是很满意，感觉如果早知道她的这个问法，完全可以做的简单很多。

参加蓝桥杯

去年我我报名蓝桥杯的时候，本来是打算报python组的，但报名时却意外发现有一个组别是web开发，这个机会我自然不会放过，直接报名！！！

这个学期马上开始比赛的时候我其实还是很虚的，因为作为第一届web组，我压根就不知道该怎么准备，考纲里的东西除了Jqury我倒是都会用，但一点题没做总感觉有点发慌，直到离省赛还有3天的时候我才发现官网一个隐藏的角落原来是有一部分模拟题的，匆匆忙忙做了几道就上考场了

省赛的难度其实还好，第二道CSS的题我当时脑子转不过弯没做出来，剩下的题倒是做的比较流畅，虽然我Jqury约等于没学，但好在省赛里题目的实现方式可以自己选择用Jq或原生JavaScript实现，所以问题倒也不大。做完感觉拿个省二省三还算很稳的

最后初赛的结果是直接省一，进入国赛！

国赛是6月18号，但因为疫情，我们学校的考试全部提前了，导致当时我忙于复习根本没时间去做准备比赛，最后考完试已经15号了，匆忙准备了两天就直接上考场了。

因为疫情，比赛转为线上，因为要求是双机位摄像，所以我提前订了家酒店来作为比赛场所

说实话感觉国赛虽然难度和出题水平确实比省赛高不少，但好几道题都强制你用Jqury实现，不像初赛那样可以自由选择实现方式（像我这样Jqury用的比较差的那几道题直接G了），后面echart和最后的算法题倒是挺有意思的。答完后感觉成绩不会太理想，但应该也不会太差，毕竟会的基本都答上去了

最后成绩是国三，还算是符合预期

写在最后

大二结束啦！

暑假本来想去实习，但考试周压的太紧，没怎么准备面试，只好搁置了。现在我在家里一边学车，一边在琢磨着封装一个开箱即用的Vue脚手架，偶尔研究研究Vue的源码，也还算比较充实。

我是小小蒙，非正式前端，正在为成为一名正式的前端工程师而不断努力！