回顾2018年|掘金技术征文

前言

时光飞逝&＃xff0c;我已经从大学毕业&＃xff0c;成为前端工程师。虽然之前也写过一篇回顾文章&＃xff0c;但透过这一次掘金给予我的回顾机会&＃xff0c;我重新找回了自己的初心&＃xff0c;以及自己的方向。

前端日常

在日常开发中&＃xff0c;我的工作是业务方向&＃xff0c;以满足内部用户的需求为主&＃xff0c;偶尔才会有写一些面向外部用户的网站。因而保持项目的稳定性和维护性是我的首要工作&＃xff0c;是的&＃xff0c;不需要很炫酷的技术&＃xff0c;但需要很稳定的技术。

发现 Antd 彩蛋问题

在开发自己的博客系统的时候&＃xff0c;一直在想要不要把 Bootstrap 改为 Ant-design。

直到 2018年 9月的时候&＃xff0c;我发现一个公共组件加入了一个圣诞彩蛋&＃xff0c;也就是在 12月 25日的时候爆炸的那个问题。

说实话&＃xff0c;当时我并没有那么注意到这个问题&＃xff0c;只是简单的看了一下源码&＃xff0c;然后发现它直接推送到 master 分支上面&＃xff0c;总感觉哪里怪怪的。

所以我就在 V2EX 上面写一个帖子&＃xff0c;然后就没管它了&＃xff0c;结果就是 Boom。

帖子链接&＃xff1a;www.v2ex.com/t/490917

学会调试源码

虽然我很希望使用 ReactJS 作为我的主要技术&＃xff0c;但是旧项目一直在用 regularJS &＃xff0c;以及一个组件库 nek-ui 。因而我需要学会看这些文档&＃xff0c;以及文档不一定有的暴露方法。。。

当我看见每个组件都有一大堆传参&＃xff0c;我就不断地想&＃xff0c;到底这个组件是怎样用的&＃xff1f;是不是真的能够生效&＃xff1f; 因而我就开始慢慢地学习了如何使用 SourceGraph 看源码。

上面截图为 Sourcegraph 的一段 nek-ui 开源代码。

看是不足够的&＃xff0c;所以我就利用 Google Chrome DevTools 调试源码。

在调试的过程&＃xff0c;我就发现旧时代的 Javascript 私有方法是多么的公开透明的。。。可以利用组件暴露的方法&＃xff0c;继承并改写它来达到自己想要的效果。

参与技术大会

还记得这一年我参加了两次 Node.js Party&＃xff0c;以及谷歌开发者大会。

是的&＃xff0c;我对于参加这些技术大会并不感到乏味。就算是要坐两个小时公交过去西溪湿地&＃xff0c;我也是愿意参加 Node.js 派对的。

这次开发者大会里面&＃xff0c;我就认识了一些来自谷歌&＃xff0c;掘金的优秀工程师&＃xff0c;也是让我有所收获。

如果你有自动化测试应用的需求&＃xff0c;那么你可以尝试使用 Puppeteer。

如果你有测试网站性能的需求&＃xff0c;那么你就可以使用 Lighthouse&＃xff0c;它会生成性能报告&＃xff0c;并提供可以改进的措施。

博客介绍文章&＃xff1a;calpa.me/2018/09/24/…

完成博客系统脚手架

在编写博客文章的时候&＃xff0c;我经常身兼三职&＃xff0c;编写博客系统的前端程序员&＃xff0c;专心写文章的编辑&＃xff0c;以及保证网站服务质量的网站维护者。

前端工程师&＃xff1a;我希望可以使用最新最快的技术&＃xff0c;同时保证服务是稳定的&＃xff0c;文章可以正常显示。
编辑&＃xff1a;我在编写文章的时候&＃xff0c;我希望可以看到预览的效果。
网站维护者&＃xff1a;网站有问题的时候&＃xff0c;可以快速回退到正常的版本&＃xff0c;避免线上事故继续发生。不仅如此&＃xff0c;我也希望可以给校对者&＃xff0c;对于每一个版本分别进行校对。

为了更好地实现这些目标&＃xff0c;我选择使用 GatsbyJS &＃43; Netlify &＃43; Contentful&＃xff0c;来达到这件事情。

博客介绍文章&＃xff1a;calpa.me/2018/12/24/…

现在这个脚手架取得超过 150个 Star 数&＃xff0c;可以说是有点超出我的预期&＃xff08;笑

Github 仓库地址&＃xff1a;github.com/calpa/gatsb…

虽然是这样&＃xff0c;但是还是有不少的问题。

下一步就是把 Contentful 的数据存取服务改为 Netlify CMS&＃xff0c;充分使用 Github 刚刚提供的免费私有仓库服务。

也是想降低用户使用这个框架的成本吧。

工具类总结

Vue

在使用 computed 的时候&＃xff0c;我发现原来它是可以使用 getter 和 setter 而不是单纯的 getter 方法。

了解到 Vue 最基本的实现原理&＃xff1a;Object.defineProperty&＃xff0c;以及订阅发布模式。

Node.js

由于公司业务原因&＃xff0c;我们使用 egg.js 来拦截&＃xff0c;转发&＃xff0c;改写请求&＃xff0c;同时需要输出报错日志。

Babel

由于 async/await 的方便性&＃xff0c;我就直接把它用到项目里面&＃xff0c;可是会有 regeneratorRuntime is not defined 的问题。我找到这一段代码是和 Babel 转译相关&＃xff0c;所以就开始了解 Babel 是如何转译的旅程&＃xff0c;例如 async/await&＃xff0c;class&＃xff0c;extend。

calpa.me/2018/07/29/…

Webpack

由于要从零开始构建前端项目&＃xff0c;所以需要对 webpack 进行一些配置。

我了解到 Webpack 原来由 loader 和 plugin 组成&＃xff0c;Webpack 多环境配置的方法&＃xff0c;以及如何输出能让程序员看命令行时感到比较友好的一些插件。

2019 年计划

很感谢这一年帮助我从萌新阶段成长的一众程序员&＃xff0c;也谢谢你们来到我的博客阅读文章&＃xff0c;给予我继续写作的源动力。我会继续编写 GatsbyJS 的文章&＃xff0c;以及探索移动端动效的方案。

在新的一年&＃xff0c;我希望可以不单是解决业务问题&＃xff0c;更加是希望以技术的手段&＃xff0c;去解决一些重复性的工作。一方面是希望了解并落地&＃xff1a;如何使用 GraphQL 节省 HTTP 接口&＃xff0c;只获取只需要数据的查询方法。一方面是希望可以制作一些可配置的后台模板&＃xff0c;直接拖拉就可以获取数据&＃xff0c;无需前端手写获取字段。。。