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

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

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

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

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

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

那么怎么又🔥起来的呢？那是因为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：https://github.com/vuejs/vue/pull/4860/files#diff-41a62d273e7179f0b99e1b9de2228c70

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 https://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或者扫描下列二维码，也欢迎您将它分享给自己的朋友。