如何阅读 JavaScript 源代码

Question

作为一名前端工程师，我必须学习很多新技术才能赶上我的工作需求。学习最新技术并不容易，因为我们必须：

1. 阅读英文文档无需翻译。（对于不会说英语的人来说，这不是一个好消息 XD）
2. 阅读不完善/没有文档的源代码。

但我们必须面对音乐：学习最新技术或回家。身无分文的人别无选择，所以我尝试总结一些技巧以使其更容易一些。

找到入口文件

入口文件是开始阅读的好地方。这里有一些关于如何找到入口文件的技巧。

感谢 NPM，我们可以在大多数 JavaScript 项目中找到 package.json，我们可以在 package.json 的 main（对于 CLI 工具的）字段中找到项目的入口文件 bin。

但是，并不是所有的 JavaScript 项目都遵循这个约定。这些项目中的一些 package.json 没有 main 字段（例如 React），其他的 main 字段指向一个不存在的文件（例如 jQuery）。对于这些情况，我们可以尝试 script.build 在 package.json 中查找（或类似的内容）。中的命令 scripts.build 告诉我们这个项目是如何构建的，然后，我们可以按照构建的顺序阅读源代码——阅读源代码不是一个好主意，但我们会学到很多关于如何构建代码的知识。

在存储库中搜索对象/函数名称

对于 JavaScript 库，最好一一阅读 API 的实现。要查找您感兴趣的 API 实现，只需在存储库中搜索 API 名称即可。我们可以在 GitHub 存储库中搜索开源项目，或者grep在本地代码中使用命令搜索。

例如，我想知道 Ramda.cond 因此，我在 Ramda 的存储库 中搜索 cond 。然后，尝试 cond 在结果列表中找到源代码（需要经验，我知道）。

用于console.error打印调用堆栈

有时候，我想知道一个框架的调用栈，比如 React。阅读大部分代码后，可以从源代码中推断调用堆栈。但是有一个聪明的方法：使用console.error打印调用堆栈。

例如，我试图了解 ReactDOM.render，所以我写了这个小演示并运行：

const Demo = React.createClass({
  render() {
    console.error('Hello world!');
    return <h1>Hello world!</h1>;
  }
});

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);

然后，我从 Chrome 开发者工具中得到了调用堆栈：

Hello world!
    (anonymous function)
    render
    ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext
    ReactCompositeComponentMixin._renderValidatedComponent
    wrapper
    ReactCompositeComponentMixin.mountComponent
    wrapper
    ...

现在，我可以在 React 存储库中搜索对象/函数名称并阅读它的实现。

结论

本文不会成为阅读每个 JavaScript 项目的通用解决方案。因此，发现这些技巧对某些项目不起作用是正常的。但它会使阅读源代码更容易。