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

蚊子前端博客
发布于 2020-11-04 12:06
虽然常说不要重复造轮子,但造轮子却能很好地提高自己,那么如何提高自己呢?有什么技巧呢?

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

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

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

对方不想和你说话-蚊子的博客-蚊子的前端博客

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

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

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. 总结

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

标签:
阅读(2124)

公众号:

qrcode

微信公众号:前端小茶馆

相关文章

公众号:

qrcode

微信公众号:前端小茶馆