前端工程师如何通过造轮子提高自己

我们常说“不要重复造轮子”，如果别人已经有实现好的、经过验证的好轮子，就拿来用就好了，如果有什么疑问的时候，还能很方便地在网上找到答案。

是的，我们确实不要轻易地造轮子，尤其是在一些大型场景下，一个不经意的小错误，可能也会引起大问题。

除了自己，大家都希望不要重复造轮子，产品只要按时并稳定上线即可，总监们只要最后的数据即可。而我们自己，却要思考下，用的整个轮子是怎么造出来的，如果我来实现这样的功能的话，应该怎么实现。

别人的轮子对自己来说就是一个黑盒，我们只是负责使用即可。但如果我们想要深入细节的话，最好还是自己实现一遍更好，即使没有人家实现的好。

自己重复造轮子有以下的几个好处。

1. 提高自己的能力 #

通过造一个自己的轮子后（不一定正式环境要使用），就更能明白这些技术方面的细节。

当然，我们也不要陷入一个误区，啥功能都要自己开发一遍。我们在时间比较充裕的情况下，探究技术上的细节，而不是事无巨细，皆以身亲之，在项目工期要求的前提下，自己不可能很完整地实现。

简单的功能，我们可以自己先实现下，复杂的功能建议先用成熟的组件，事后再探究内部的原理。

假如我们想要实现一个前端的数据请求模块 request，目前行业的标杆是axios。针对我们自己的业务场景，可以试着自己先实现一下，至少能满足当前业务的需求。当我们完成这个模块，并能正常实现请求后，再与 axios 进行对比，看人家是怎么实现的：

1. axios 为什么这么实现，同样的功能我是怎么实现的？
2. axios 比自己多了哪些功能，有什么好处，例如我们只是得到了接口返回的数据，而 axios 则返回了{config,data, request}等字段；
3. 扩展性如何，当想要在 request 模块中添加功能时，是否要大刀阔斧重构，还是做成了插槽；

当我们对比完这些功能的残缺后，再完善自己的轮子。完善后再去阅读 axios 的源码，就会发现 axios 的代码结构、功能实现等，非常的赞。

自己造的轮子未必有很多人使用，但本身探究的过程就已经非常地值得。这些过程就是财富，就是自己的能力。

2. 提高知名度 #

基于自己业务造的轮子，并不断地完善和改进，就会有越来越多的人来了解和使用你的轮子，也提高了你的知名度。

我们技术人员应当要树立起自己的品牌，给自己加上一个与众不同的标签，每当说起这个标签时，自然而然地就能想到你。作为开发者，如何树立个人品牌？，这是几年前转载的一篇文章，现在读来，依然觉得还是很有价值。

例如当我们说起 CSS 大神、图片女神张含韵，必然就能想到张鑫旭；说起前端蚊子大神、造轮子小能手，就必然说的是我。

3. 造轮子的步骤 #

如何造轮子？我们的轮子必然是要服务我们的业务的，因此我们可以从业务的特点出发。如果我实现了这个功能，下一个项目就能直接使用。

3.1 针对自己的业务实现简单的功能 #

我们的页面会在腾讯新闻客户端和微信、QQ 中访问比较多，在现在前后端分离的场景下，都是通过接口请求完成交互。在微信、QQ 或者浏览器中采用XMLHttpRequest或者fetch可以完成接口请求，而在腾讯新闻客户端中，有一种特别的请求方式。

那么我就要封装一下这个请求模块了，可以让业务层无需关心当前请求从哪个终端发起，所有的判断均在模块内部完成，对外提供一个完整和统一的配置。

这里我会先判断当前环境是否是新闻客户端，如果是，则使用新闻客户端里的请求方式，否则若存在 fetch 方法，则使用 fetch，最后使用 XMLHttpRequest。

这个数据请求模块，已经满足我当前业务的需要了。

3.2 提炼为小模块 #

后来随着写的项目越来越多，越需要通过源码拷贝的方式在多个项目之间传递，并且随着自己能力的提高，模块越来越完善，bug 越来越少。但之前的项目想要更新这块的功能时，不知道如何更新，从哪个项目把更完善的代码拷贝回来呢？

这时，我就就把这个功能封装成一个 npm 包发布出来，这样每个项目只使用这个包就可以了。之前的项目里需要升级这块时，只需要更新到对应的版本号即可。而且其他人也可以使用，而不是直接源码拷贝的方式来进行传递！

3.3 学习第三方成熟轮子的结构和实现方案 #

在项目向着更大的场景展开时，例如我们使用到了 node 同构直出渲染，就要考虑到在 node 服务端发起的接口请求。这时，我就想到，除了在新闻客户端中的特殊请求外，在微信、QQ、浏览器和 node 服务端的请求，均可以使用 axios 来实现。然后基于 axios，再搭配上新闻客户端的特殊请求，就更完美了。不仅解决了跨多终端请求的麻烦，还能使用到 axios 提供的能力。

在看 axios 的源码中，也学习到了他的代码结构搭配和配置的能力，同时 axios 还提供了请求拦截器和响应拦截器的能力，方便我们能在请求前和请求后做一些处理。并且还能够避免 XSRF 的攻击漏洞。

3.4 发布自己的组件 #

在学习 axios 这款优秀的数据请求组件后，便可以对自己的组件进行更好地改造，拥有更好的性能和扩展性，并发布出自己的组件，能够支撑更多、更大的业务。

4. 总结 #

但行造轮子，莫问前程。其实在重复造轮子的过程中，我们更加关心的是造轮子的过程，从中收获了哪些。我是蚊子，一个造轮子小能手。