技术 | 阅读源码让你的前端技术栈视野进阶

2,038 阅读7分钟
原文链接: mp.weixin.qq.com

前面写了两篇文章分别从阅读,保持竞争力来阐述如何学习的问题,若你还未阅读过,那么在阅读此篇文章时最好先阅读一下:

技术 | 前端工程师该如何保持竞争力

观点 | 获取专业知识的正确姿势

今天,我想说一说自己从源码上收获的一些感悟,对于自己的前端技术栈进阶有什么帮助,而自己又该如何去阅读它。

至于开源项目的来源,这都已经2017年了,想必肯定听说过全球最大的同性交友网站:Github,如果你还未听说过,只能证明你太Low了。没事多来逛逛,不过依然要保持专注,去寻找对你现阶段专业(职业)最有价值的项目。如果,有时候,你不知道信息来源,不妨试试看看最热门的项目中更新了什么。

比如最近又炒起来了一个“新特性” performance,其实这是一个很早之前就开放的一个关于性能分析的API(IE9就支持了喔),有兴趣的朋友可以阅读以下:developer.mozilla.org/en/docs/Web…

那么怎么又🔥起来的呢?那是因为Vue发布的2.2.0版本中多一个新的配置项,Vue.config.performance 用于设置 performance。

New config:  Vue.config.performance. Setting it to true traces component init, compile, render and patch time in the browser devtool timeline. Only available in dev mode.

你看有些朋友就能很好的去源码中吸取养分,可能这个API十有八九是不会用上,这儿正好遇见了,上MDN查一下,这有什么用。通读完之后,你要是能灵光一闪发出“原来是这样啊”,这样的感慨,又何尝不是学习到了新的东西。要是你实在不知道怎么学,多看看,你就知道要学什么了,performance就是一个很好的开始。

我们回过头来再来看一看之前关于EventEmitter的一篇文章(抱歉,原始的文章因为编辑失误,有错别字和遗漏的代码。):

技术 | 前端面试题(二):自定义事件

这篇文章关于EventEmitter的代码实现就是从Vue删减而来,我们再来看看Vue更新的files diff:github.com/vuejs/vue/p…

if (Array.isArray(event)) {   
   for (let i = 0, l = event.length; i < l; i++) {
      this.$on(event[i], fn)
   }
}

你可以看见事件源(Type)可以注册多个事件而使用同一个事件回调,这是不是又是一种增强的思路呢。多思考一下,是可以从源码中吸取到思路的,说不定什么时候你就能用的上,模仿,参考,是我们进阶过程中必然要经历的一个过程,这没什么好丢人的。

策一些其他的话题,读高中的时候我的政治老师常对我们说“劳动并不可耻”,来北京打工的人群也不可能个个都是上坐办公室的“白领”,也有很多朋友都在艰辛的活着,付出了比常人更多的汗水,才能在北京生存下来。理发店剪头发的,小吃店打工的配菜工,也都是从模仿,参考开始,如果一开始对于这件事情都有丢人之感,就更别提如何进阶了,都是为了更好的生活,心态很重要。对于我们而言,吃饭的家伙就是编程,我们的劳动除了本职工作之外,更多的都是在通过阅读,模仿,参考,思考来沉淀你的技术栈。

阅读源码,首要的先决条件是你一定不能对源码产生恐惧之心,但要保持敬畏之心。我们常说,现在的编程多半都已经是站在巨人的肩膀上来做开发了。想想八十年代的程序员,一个不爽动不动就发明语言的趋势,我们已经“幸福”了很多。如果你产生了恐惧之心,相当于是犯了大忌,打击信念是很容易放弃的,想起一些网路上传播的段子“XXX从入门到放弃系列”,现实生活中,应该还是有的。 其次我们要保持专注克制求知欲,不要浪费时间到不相干的项目中,如果你现阶段的职业是前端工程师,时不时的去阅读Java的源码,然并卵这毫无意义,只能说你在浪费你有限的生命,投入到根本拿不结果的事情上来,除非你正打算换一个行业。

要学会发现对于你现阶段有价值的项目,如果你工作中使用了某个库,比如React,在有限的时间里,可以多投入一些精力,先看一看每一次releases时的Notable Changes 或者 New,如果某些特性对于你的产品,在编码中有极大的依赖,最好是特定的阅读一下这些源代码,看看它背后的实现,这样你才能很好的hold住它。有时间的话也可以看一看Github的explore github.com/explore,比如Trending 看一看一些热度比较高的项目,看看它们的README,有时候发现的过程还是很有趣的。

学会使用工具分析开源项目的走势图,先把脉络分析清楚,再扣细节。如果你有兴趣,可以阅读一下我研究的weex runtime脉络分析:

技术 | 一行经脉让你看懂 Weex Runtime 的任督二脉

既然我们是阅读前端技术栈的源码,想来对于JavaScript来说,目前地球上最好用的工具首推WebStorm,至于怎么使用它,我建议你可以好好阅读一下使用文档。不过,看源码是一定要多用用Structure工具,先看工具帮你生成的结构。任何程序运行必然会有一个入口,Vue也不例外,主要是Vue这个类,你可以按两下shift出来search Everywhere的界面,先定位到这个类中,在这个类中是可以看见this._init(options)这样一行代码的,按住command + 触摸板轻击,这样就可以定位到具体的实现里面,在这个_init的实现里,你又能看见一系列的方法:

vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initState(vm)
initInjections(vm)
callHook(vm, 'created')

在你阅读的同时,我有一个小小建议,可以在本子上画一下,它的走势图做好笔记注释,阅读源码的第一步,不是去扣任何小细节,而是要看宏观。你能看见,生命周期,事件,渲染,都是从_init方法内各自进入各自的处理流程。当然,如果真是阅读Vue的话,第一步应该是先把构建搞清楚。

在有自己独立思考的同时狂扣细节,比如从initEvents开始,先看一看它写在哪个文件里,在Devtools中打上一个断点,一步一步的跟下去,你能一窥它实现的细节是怎么处理listeners的,思考一下如果是自己,又会如何实现。

如果 发现问题可以发一些PR,让作者review你的代码,就算被close了,也会有充分的讨论(这里可不是让你随便去蹭PR),说不定你又学到了一招。 阅读源码是一个精益求精的细活儿,一定要有耐心,通过这些源码的学习,到达你既定的一些目标。

你身边如果有朋友对混合领域(跨技术栈)或全栈感兴趣,可以转发给他们看哦,^_^先谢过啦。


更多精彩内容可关注我的个人微信公众号:搜索fed-talk或者扫描下列二维码,也欢迎您将它分享给自己的朋友。