初入前端
在 2009 年,高考结束后报志愿时,本来选择是计算机专业,从珠海毕业的亲戚也是读计算机专业,那时正逢金融危机,IT行业非常不景气,毕业即失业,由此被迫选择了饿不死的机械专业。
2013年毕业后,进了一家工厂,任职工艺工程师,平时做做摸具看看产线,得知师傅薪资不高,做了五年才6k多,果真是饿不死。
一进来就是夜班,上夜班最为悠闲,只要产线不出故障,时间都是你的。某天晚上和一位多年未联系的高中同学电话聊天中,得知他在从事前端工程师岗位,他告诉我前端入门很简单,并向我推荐了妙味课堂这个学习网站。
在妙味课堂上充了一年的会员,花了99RMB开启我的前端之路。回想当初用记事本写 HTML 和 css 语法,通过更改记事本文件名后缀改为 .html 、.js 、.css,然后把 .html 文件拖到浏览器中,这样来学习前端。到如今已经是四个年头了。
在熟悉 HTML5 、 CSS3 和 JQ 语法,就打电话问同学这样可不可以找工作,同学只是给我一张 psd 图,说这个他公司的一个页面,能做出来就可以找工作了。当时花了 2 天时间把这张 psd 做成静态页面,把代码发给同学。同学看了后说可以了。本来是叫同学内推,但是他那边已经没有岗位了,只好自己出来找工作了。
启航
2016年3月递交辞职,来到福州找工作。当时还天真的以为找工作很容易,在面试过程中不是笔试不过关、就是上机操作不通过。在最后一家公司面试时,面试过程很不顺利,面试官叫我回去等消息时,我鬼使神差地说了一句:“我可以留下来吗,不要工资都可以”。于是我入职了这家公司,老板给我开了个实习的薪资1.8k,那天2016年06月7号,虽然下着小雨,眼中却是晴天,时隔三个月终于找到工作了。
那时是用 JSP 模式来开发,我主要负责提供静态页面。这家公司是专门给国家电网做生产系统的,因为国网的电脑还有很多是 xp 系统,故要兼容到 IE6 浏览器,无非就是那些布局错乱的兼容问题,2个月之后因为表现优异,老板也不是黑心老板,直接给予转正,薪资达到4.5k。就这样写半年的静态页面,解决了半年的IE6兼容问题。
到了2017年1月时,公司接到一个项目,其中要求做个微信公众号,里面包含一些简单的进销存的功能,主要给销售人员使用。当时来公司也一年多了,我向经理提议用 Vue 框架来开发。经理反问用 Vue 框架有没有信心如期完成项目。当时我心里也没有底,硬着头皮说:“有啊,保证如期完成项目”。结果涉及到前后端跨域时就卡住了。那时后端直接说这是前端去解决的,只好自己百度,把问题找出来,恳请后端配合配置来解决,现在回想起来,那时的后端真不友好。
历经1个月,每天晚上加班,周末也在家里加班,终于如期完成了项目,本想经理会表扬,得来却是否认。也不怪经理,7个页面用了1个月,效率的确不咋样。在开发过程中遇到很多坑,没人咨询,自己百度慢慢把坑填平,后面又恢复给后端提供静态页面的日子。
不过从那个微信公众号的项目,开启了使用 Vue 框架和前后端交互的阶段,算是前端职业生涯的一个进阶吧,自打那以后,一有空就开始学习 Vue 的 API,并不断找案例开发,因为只有一个项目经验,所以只能不断记忆 Vue 的 API,为面试做准备。整整准备了半年,期间把公司其它项目改成用 Vue 开发,通过请一个后端吃过好几次饭,请他帮忙提供接口,就这样伪造几个项目。
好景不长,公司被合并,被裁员,但是随着市场对会 Vue 框架的吃香,在2018年3月份找了一份不错的工作,还是上市公司,虽然只是新三板。在2018年3月份入职。
想要在职业生涯有所发展,应该主动去创造或争取机会,而不是被动等待公司给你机会。
转折
这家公司主要是做后台管理系统,刚进去时候,是做一个商城后台管理系统,这个系统是用 PHP 开发的,前端页面是用 Vue 框架混合在里面开发的,也证实了 Vue 是一个渐进式JavaScript 框架的概念。
在开发这个系统中有个弊端,热更新非常慢,每次改一个东西,都要刷新页面,非常影响开发效率。研究一下项目的架构,发现每个页面所在的 PHP 代码中引入 Vue 项目编译打包好的 js 和 css 文件。于是就按功能把页面分成一个个模块,每个模块都独立搭建一个 Vue 工程项目,将编译打包后的静态资源要存放的路径 assetsPublicPath 改为页面对应的路径。比如 www.xxx.com/home, 那么assetsPublicPath配置为 /home/ 。再把编译打包生成的 html 文件中引入 js 和 css 文件的代码复制粘贴到对应页面所在 PHP 代码中。这样前端代码分离后,热更新速度就变快了,大大提高开发效率。
借此机会我向主管提出提前转正的申请,结果提前1个月半转正,薪资10.5k。
开发中遇到效率问题时,不要以此为缘由去抱怨,要主动去研究解决,这是体现你价值的机会。
接下来的日子跟着主管做了两个后台管理系统,在开发中,主动去研究主管写的代码,学着怎么处理菜单功能权限,如何搭建系统外框架,怎么配置路由,怎么封装axios等等。等新项目来的时候,主动跟主管说想独立负责一个后台管理系统的开发。在独立开发一个后台管理系统后,对Vue、Vue-Router、Vuex 已经都很熟练的掌握。
工作中不要只管自己的代码,要利用空闲时间去研究学习同事写的代码,利用公司资源让自己进步。
半年时间过去了,已经完成了4套后台系统管理的开发,看到公司要开发一套自己的产品,里面包括视频直播,地图应用,数据大屏等一系列需求,回顾之前做的4套后台管理系统都是一些增删改查的简单功能,就只有对一些复杂表单的处理比较有难度。于是跟主管说:“想加入新项目的开发”。主管回应:“你不是还负责4套后台管理系统的维护,忙的过来吗”?“没事,那4套系统我已经很熟悉了,有新需求时加班完成”。
就这样加入那个平台的开发,这个平台内容非常多,在开发过程中学会了很多东西,例如:一个页面如何合理分割成一个个组件,兄弟组件之间的数据如何合理的交互,如何利用异步的思想去请求和拼接大量轨迹数据在地图上展示,如何进行多个视频直播,如何开发一个数据大屏等等。
工作中要主动去争取对自己职业发展有帮助的项目。
随着那个平台上线运营,我也回到原来的4套后台管理系统的维护中,这段时间非常悠闲,也没有多少新需求。在跟同事的闲聊中发现,一些后端在其它后台管理系统的开发中,连前端部分也做了,虽然代码写的不咋样,但是功能基本满足业务需求。当时就有很严重的危机感,目前所做的内容连后端都可以完成,那公司还需求前端干嘛。又听他人说起:“做后台管理系统的前端,一般都是往全栈方向发展”。那还要去学习 Java ,那时迷茫了好一段时间。
那段时间也无心工作,空闲时都是在网上闲逛,有一个 Avue 的前端框架闯进我的视野,在里面发现了表单生成器、表格生成器、数据大屏生成器,发现前端还能这么玩。于是就产生了一个设想,既然公司的后台管理系统的那些增删改查的页面中的功能都大同小异,为何不把这些页面封装成一个组件,通过后端返回的 JSON 数据来渲染出页面,在 JSON 数据定义了前端页面需要用那些组件渲染的数据,也可以定义前端传给后端数据的 key ,在封装的组件中就用这些 key 作为每个表单项 v-model 的绑定值,也可以省去跟后端对接口的步骤。
说做就做,利用空闲时间,花了一个月时间,把组件开发出来,也写了详细的demo和使用文档,拿着这些材料跟主管汇报,请求拿一个项目来试用。结果主管回复目前没有适合的项目。好吧,相当变现拒绝了,只好利用 Mock.js 模拟数据请求,来继续完善这个组件。
不久后来了项目,是给公司内部做一个后台管理系统,页面不多才12个。利用周末的时间,用 Mock.js 模拟数据,完成这套系统,周一再向主管汇报,最终主管同意。
最终这套组件成功运用到公司项目中,在处理一些简单的后台管理系统,可以用这套组件快速开发。在开发这套组件过程中学会如何用 Vue CLI3 搭建 Vue 组件框架,如何用 npm 发布组件,slot 插槽、rovide / inject 这些不常用的 Vue API 的使用。并在掘金输出以下两篇专栏:
若一件事对职业发展有很大帮助,就应该坚持下去,哪怕目前没被人认可。
年底,发现前端组长离职了,走得悄无声息,就这样被主管任命为前端组长。还有前端组好几个小伙伴申请离职了,就剩下3个人了。通过微信完成和组长的前端工作交接,花了一个月时间整理了公司的全部前端项目,发现真的非常简单。
接下来的工作就是负责面试招人,带新人熟悉项目,新人的质量的确不高。不过我还是尽心尽力地教他们,在教的过程中也对自己掌握的知识点的梳理和复盘。
前端岗位中不存在教会徒弟饿死师傅的现象,别看前端入门简单,到后面进阶一阶比一阶难,教会一个人,分担你的工作,节省出来的时间就是自己的,时间才是最宝贵的。
在教会新人后,把后台管理系统的项目,分别安排给他们维护,自己负责维护公司那个复杂的项目。在维护这个项目过程中,发现其中首屏加载速度非常慢,非常影响用户体验,在优化过程中,学会对 webpack 的配置,具体优化手段可以看我这篇专栏🚩前端面试之如何说Vue项目性能优化(万字长文)。
同时也在掘金上输出 5 篇关于 webpack 的专栏。如下所示:
- 🚩四年前端带你理解路由懒加载的原理
- Webpack之externals用法详解
- Webpack之SplitChunks插件用法详解
- Webpack之loader配置详解
- Webpack之MiniCssExtractPlugin插件用法详解
因为公司项目比较简单,而且都是做 B 端用户的项目,想换一家做 C 端用户的公司,顿时萌生跳槽的心思。又因为想到现在面试中人人都会 Vue ,故想用了解 Vue 源码来增加自己的优势。所以在此后的时间,除了维护公司的项目,其余时间都在研究 Vue 源码,为面试做准备,同时把研究结果在掘金上分享出去,如以下10篇专栏。
- 🚩Vue源码——模板和数据如何渲染成最终的DOM
- 🚩Vue源码——组件如何渲染成最终的DOM
- 🚩Vue源码——组件是如何注册和使用
- 🚩Vue源码——异步组件是如何使用
- 🚩Vue源码——如何监听数据变化
- 🚩Vue源码——订阅者的收集
- 🚩Vue源码——订阅者的响应
- 🚩Vue源码——nextTick实现原理
- 🚩Vue源码——收集订阅者引起的性能问题
- ✍Vue源码——学习如何判断数据类型
当然在期间也有出去面试,在面试过程中发现面试官非常喜欢考你手写实现一些常见语法。于是又去研究这方面的知识,同时把研究结果在掘金上分享出去,如以下3篇专栏。
经过多次去面试,也摸清目前市场对5年多工作经验的前端的要求,感觉有信心拿到 offer。于是就向公司提出离职。
发展
辞职过程并不顺利,面谈了好多次,公司也以大幅度调薪来挽留,但是目前的平台已经不满足职业发展的要求,还是坚决离职,最终公司同意我的离职。在公司最后一个月中,交接就花了3个礼拜,最后一个l个礼拜把简历挂到智联招聘,当天就有40多家发出邀请,花了一晚上时间筛选,选择了8家,花了三天时间面试,收到7家offer,最终选择一家开发面向 C 端用户的产品的公司,虽然这家公司给出的薪资并不是最高的,但是面向 C 端用户的产品对前端的水平比较高,希望通过这个平台让自己的前端水平更进一步。
展望2021
2020年或许是成功的一年,在2021年更要加倍努力,在这里给自己定个目标:
- 继续完成 『Vue源码』系列专栏。
- 继续完成 『面试的底气』系列专栏。
- 开源一套 UI 组件库,并输出对应专栏。
- 用 Canvas 技术实现一套在线制作思维导图的API,并输出对应专栏。
- 用 webpack和Node.js 搭建一个属于自己的脚手架,并输出对应专栏。