转载

我的2016：从野路子到正规军的前端养成记

2016年终于进入尾声啦，刚好也趁着@segmentfault社区举办的《回顾 2016，你都收获了什么？》活动，好好回顾一下我的2016年。

2016年发生的事情非常多，还是以时间为线索慢慢写起吧

一、结束实习

在今年年初的时候，正式从实习了半年的单位离职。在这半年的实习时间内，负责的是公司电商系统的前端页面开发，第一次接触了 VueJS 这个框架。当时整个公司加上我只有2个前端工程师，要做的网站却是功能复杂，需求更改频繁，重构也是家常便饭。随着系统复杂度的提升，原有的架构已经不能满足，经过和老大的沟通，最终敲定了使用 VueJS 作为基础框架，进行完全的重构。在重构的过程中遇到过许多坑，还好最终都一个一个填了过来，也积累了许多宝贵的经验。

为了适配不同的设备，第一次接触到了“响应式设计”，也得以有机会深入研究 bootstrap 的源码，学习了它是如何组织代码，如何解耦变量，如何拆分文件等工程化的知识，明白了原来样式可以这样写。后来回头总结写了一篇文章 bootstrap3.x内less文件夹的文件内容及功能分析，有兴趣的可以去瞧一瞧。也基于这一次对于 bootstrap 源码的学习，终于能够看懂别人家的样式库是怎么写的了，后来自己也造了一个轮子： elf，基于flexbox的响应式CSS框架。

后来因为毕业论文，以及辅导员隔三差五就要抓人开会等蛋疼的事情，终于在过年前办完了离职手续，回家过年以后就正式结束了实习。

这份实习对我意义非凡，在不足半年的短短的时间内，让我有机会接触到行业最新的技术，让自己的实战能力得到巨大的提升。

二、面试狂魔

过年的时候和女票兜了一圈长沙和凤凰古城，回来以后马不停蹄地勾搭面试。由于技术太烂错过了秋招，所以能好好把握春招的机会了。其实在过年前我已经有心仪的公司了，但是HR说他们已经招满，即使要面试也得在过完年以后才能安排，所以只能慢慢等呗。可是旅游回来了还没有接到面试通知，心里不免有些慌，为了两手准备，于是在某APP上放了一份简历。也许因为简历写得还算OK，有不少的公司邀请我参加面试，也因此拉开了我“面试狂魔”的序幕。

一个月内面试了大大小小超过十家公司，慢慢地积累面试经验，总结教训，知道了自己各方面的不足，也明白了“面试是双向选择”的道理。从说话结巴到“面试面试官”，我也慢慢成长为一个“面试狂魔”，offer收割率也很不错。

等啊等，后来终于等到心仪公司的面试邀请了！一向淡定的我……这次也很淡定，面试后还是比较有信心的，起码面试官问的问题我答得来，吹水的问题我接得上，大概是这样了吧……

嗯，然后就成了。

这段时间诞生了我的第一个开源作品，是一个用 Vue 做的markdown编辑器，叫做 Markcook ，那会还是1.0版本，代码特别涩…… Markcook1.0的开发总结

三、毕业

大学的专业是 光信息科学与技术 ，酷炫吧，搞光搞电搞相对论，就是不搞前端。还好我的导师对我们比较放心，允许我们自定题目。所以我的毕业设计妥妥的选择了前端方向。

为了方便而又略显逼格，我的毕业设计选择了制作一个“私人博客”，也就是没有登录注册机制的一个博客……前端用的是我最喜欢的 VueJS ，后端的话选择了 PHP ，数据库使用传统的 MySQL 。当时除了前端的技能，后端和数据库完全一窍不通，所以我希望趁毕业设计这个机会好好学习一下后端的技术。

PHP 不愧是“世界上最好的语言”，真的很好学啊有木有，借了本书回来啃了一周就立马着手进行后端的开发了，过程挺顺利的，总算把前后端的一整套运行流程都摸了一遍，这对我日后的学习以及工作来说都非常有意义。在作品制作完成后，写下了这篇文章：采用vue+webpack构建的单页应用——私人博客MintloG诞生记，刚好也是我毕业论文的一部分内容。

拿了offer，签了三方，完成毕设，通过答辩，我也在今年六月份结束了4年的大学生涯。虽说从大三暑假开始就几乎没有在学校待着而是跑去深圳实习，但是当我真正拿到毕业证学位证的那一刻，我才发现，原来4年时光真的就这么过去了，我也正式从象牙塔走向了社会。

时光这坏人偏却冷酷如许，离场慢些也不许 ——《青春常驻》·张敬轩

四、补基础，造玩具

由于7月底才入职，所以在结束实习后的大半年内，我都处于自学的状态。通过之前面试总结的经验，我拿纸和笔一条一条列出了所未掌握的知识点，知道了有哪些基础要补，有那些东西要学。

去泰国玩了一圈后，看完了《http权威指南》，《高程3》，《结构与算法的Javascript描述》等经典著作，对自身的技术体系有了一次全面的提高，但是奈何实战经验仍然不足，很多地方没有理解通透，得找个时间好好重温一下，必定能收获更多。

与此同时，也开始挑战热门框架的源码。从 Zepto 入门，结合网上的资料慢慢对它层层剖析，把整个库的原理和一些不熟悉的写法都研究了一遍，极大提高了我“看源码”的能力，也总结出了一套属于自己的分析源码的心得。在日后的很多项目里，遇到文档不全或者有疑惑的地方都不再害怕了，直接扒源码去了……

也是通过看各种各样的源码，学习到了很多设计模式和代码规范，尤其是看到一些简洁又清晰的代码，真的情不自禁地要拍手叫好，潜移默化之下，自己的代码也逐渐变得规范起来。一些好的开源项目，不仅代码逻辑清晰严密，而且文档齐全，logo也设计得很好，非常优秀，也因此越看越手痒，后来忍不住了开始自己造玩具玩：

Markcook 升级重构到1.2版本了： Markcook 1.2，超轻的开源markdown编辑器
学习 NodeJS 和算法，造了个轮子：自动化文件目录结构生成工具——filemap.js
喜欢 PHP 的模版引入，于是写了个能在html里面实现模版引入功能的工具： gulp-html-import，在html中引入外部html文件
研究 vue-cli 的原理，自己撸了一个脚手架工具：教你从零开始搭建一款前端脚手架工具
到目前为止我最喜欢的玩具： MottoJS，一个让你的“座右铭”更好玩的JS插件

另外还翻译了几篇文章：

【译】22个必备的CSS小技巧
【译】 Houdini：也许是你未曾听过的最振奋人心的 CSS 进化
【译】关于Webpack中一些让人困惑的地方的解答

翻译水平略渣，但是也让我对英文的阅读更加得心应手，也开始习惯每天浏览 Medium ， Reddit 等技术社区，掌握最新最热门的前端资讯。

五、入职，接受正规军训练

如果说之前的经历都是自己在摸爬滚打，那么在7月底入职以后，才算是真正见识到什么叫正规军的打法。从正式入职至今，我对于自己的评价是“多而不精”，典型的啥都会一点，却啥都不精。由于以前都是在小公司实习或者自己做小项目，几乎完全没有团队开发的概念，在第一次接手公司的业务，需要和其他同事联合开发某些业务模块时，我竟然发现自己无从下手。为什么一个看似简单的功能要区分这么多模块？为什么要这样写而不是那样写？对业务代码的看法从“这么简单的玩意儿竟然这么复杂”，到“哦哦原来如此”，再到“卧槽我根本就没考虑到这种情况”，入职以来我最大的成长就是戒掉心浮气躁，学会踏实做人。

现在每接到一个新的任务，我都会仔细考虑分析它的各种可能状况，在开发的过程中也时刻注意着会不会引起什么副作用，在开发完成进行测试的时候也会老老实实认真细致地进行，避免犯错。

当然，也没有停止写博客的习惯，在工作中遇到的问题，经过仔细研究学习后，总能获得不少的收获，也因此诞生了几篇我觉得很有意思的文章：

研究SEO的时候顺便研究了下 PhantomJS ：基于 PhantomJS + Node + Express + VueJS 1.x 的服务端渲染实践
研究强缓存 evercookie 源码的时候，学了招黑科技：探索前端黑科技——通过 png 图的 rgba 值缓存数据，顺便做了个新玩具： SphinxJS——把字符串编码成png图片的超轻量级开源库
研读某框架源码的时候，发现它竟然能够在 document 上监听设置了 stopPropagation() 的元素的事件，后来明白原来是函数劫持：谈谈JS中的函数劫持
研究HTTP2.0：深入研究：HTTP2 的真正性能到底如何

更多的，还是在业余时间继续学习，比如追随 Vue2 的发布顺便升级个 Markcook 神马的： Markcook2.0，使用Vue2.0和Vuex2.0进行完全重构升级；以及研究 Vue 的源码并加入自己想法的：使用ES6的新特性Proxy来实现一个数据绑定实例。越学发现水越深，越是工作越是发现和周围大神的差距，越是不敢放松自己。