My First Post

By 前端关宇

如何阅读开源项目？

为什么要阅读源码？

更好的解决具体的问题 。带着问题学习源码

  1. 本地安装 git
  2. GitHub 找到要看的项目的地址
  3. Clone 到本地
  4. 查看 remade.md 看这个项目解决了什么问题
  5. 整体上熟悉目录结构
  6. 再看具体主流程 要带着问题看 不然容易迷失

如果是具体的前端项目如何阅读？

上面前 6 步不变

  1. 是否 🈶️package.json 文件 - 查看里面的 main 字段 对应的就是入口。 我为什么知道？ 这就要熟悉 nodejs 的 package.json 的目录结构以及每个字段代表什么意思，具体可以 google + 关键词 后续、去了解， 比如 nodejs package.json main , 众多结果中 找最靠前的那个 发现是 npm docs 里面有描述 ，打开页面， 是一个看找到还是快速搜索？ 当然是 快速搜索， 这些提高效率的小举动，为你节省生命， 可以尝试一下，mac 下 浏览器打开的页面中

Command + f 输入 main 就可以快速定位要找的知识点。

  1. 找到入口文件以后 就可以逐个看下去了 好的项目源码 命名规范 可以让你了解到很多信息， 方便阅读 如果对某一块代码不了解，可以先跳过，后面再回头看看， 不行再去找其他人对于这块的解答。 如果不了解某一个模块的作用的时候， 测试用例就很有帮助了，测试用例里面包含对输入和输出的校验， 可以从那里了解到这个模块的大致作用， 再回头去看这个模块的源码就会好一些。

  2. 但是不是所有的前端项目都有 package.json 文件 这时候,

    你就要分析这个项目的性质了是 monorepo？

    是 ui 库 ？

    还是 cli 工具库？

    • 如果是 cli 工具库 有些入口是在/bin 目录下 一般来说 /lib /src下就是该工具库的核心代码
    • 如果是 ui 库 可以去 github 了解一下 vue react 或者 angulr 还是其他 ui 库的项目目录。

  3. 再结合【断点调试】查看函数调用栈 找到关键流程 ，具体在哪里打断点 就要平时多了解多看多练习了， 初读源码可以从小的项目入手，或者小的项目的某个功能或者函数入手，如果实现具体的函数 如何讲函数组合实现某一个功能， 可以从代码实现考虑到最后效果， 也可以直接看最后效果，再反推如果是自己该如何实现，为什么这么封装。一个来回会理解的更加透彻

  4. 再结合 全局搜索 快速找到自己想看的部分 或者方法名等等

  5. 再关注核心开发者 学习他们的 blog 或者视频

    • Behind the Scenes: Improving the Repository Infrastructure 这篇介绍的是 React 项目仓库的基础设施。
    • Sneak Peek: Beyond React 16
    • Andrew Clark 一开始就写了一篇介绍 fiber 架构的文档。
    • Dan Abramov 在 JSConf 上对 React 未来的一些新特性的介绍 -Beyond React 16。
    • React 博客中的 Sneak Peek: Beyond React 16 也是对这次 Talk 的介绍。
    • Evan You 介绍前端框架数据变化侦测原理的 Talk。Vue 文档中也有 Reactivity in Depth 这样的介绍原理的章节。
    • Sean Larkin 的 Everything is a plugin! Mastering webpack from the inside out 介绍了 Webpack 的核心组件 Tapable。
    • James Kyle 的 How to Build a Compiler 可以让我们了解 Babel 转译代码的基本流程。 例如 how to build a complier

  6. 最后学好英语，不是中文不好， 有些技术或者框架是国外先发明的，用中文理解也可以，但是多少会有偏差和信息差。

总结如下: 宏观微观并行 宏观学习作者如何设计和架构，学习作者优秀的思想。 微观学习如何具体实现，如何调试便于自己理解对应的问题，对于同一个问题，作者是如何解决的， 考虑的是否全面，等等提升。

读源码的意义是了解如何实现。 如何更好的实现， 自己能不能实现。能不能实现好， 来解决我们遇到的具体问题。刻意练习才会有进步。

一个技术大牛应该有的特点

  • 技术控

  • 全局观

  • 慎行

    • 设计方案时候 是否考虑过多个方案
    • 编写代码的时候 代码符合规范 使用设计模式优化 重构
    • 测试的时候 测试用例考虑的是否全面

  • 提交代码的时候 code review

  • 沟通 很重要

  • 架构能力

    • 设计模式的运用。
    • 阅读大量书籍
    • 在企业中不断参与项目实践 积累经验

  • 刨根问底。背后的原因是什么 不要解决问题就完事了 多想想为什么有这个问题

  • 代码整洁之道

  • 用户为本 用户第一

  • 执行力。快 狠 准。站在对方角度考虑问题，解决问题的时候会更有动力。设置提醒 不要忘记， 安排好要做的事情， 一件一件去完成，比乱序同时处理多个事好太多。

  • 懒 重复的事情交给机器去做，关键你能不能想到这么做，剩下就是实现

  • 画图能力 系统架构图 部署图 UML 类图 时序图

  • 引路人 格局 以及开源精神的体现

  • 爱生活 生活是最本质的东西，一切都围绕着生活