番外：菜鸟如何读优秀 JS 开源项目之“2048”

Bolt_白衣苍狗发布在My Code Wars 我的代码战争view：1495

前戏

今天心血来潮，和朋友突然想到要看一下那个大名鼎鼎的 2048 源码。

在 github 找到分支最多的 2048 开源项目，下载下来，就可以用自己最喜爱的编辑器看其源代码了。

2048-master\.    |----js\.    |----meta\.    |----style\.    |----.gitignore    |----.jshintrc    |----CONTRIBUTING.md    |----favicon.ico    |----index.html    |----LICENSE.txt    |----Rakefile    |----README.md

我和朋友都是菜鸟，打开 js 文件夹，markdown！这么多 js 文件，怎么看啊。

2048-master\js\.    |----animframe_polyfill.js    |----application.js    |----bind_polyfill.js    |----classlist_polyfill.js    |----game_manager.js    |----grid.js    |----html_actuator.js    |----keyboard_input_manager.js    |----local_storage_manager.js    |----tile.js

世上无难事，只怕你放弃。我还是硬着头皮从头到尾看了一遍，心中大呼：

这代码真他 markdown 的优秀，虽然我不知道啥叫优秀的代码。

筛选

在 html 中的引入顺序是这个样子的：

  <script src="js/bind_polyfill.js"></script>  <script src="js/classlist_polyfill.js"></script>  <script src="js/animframe_polyfill.js"></script>  <script src="js/keyboard_input_manager.js"></script>  <script src="js/html_actuator.js"></script>  <script src="js/grid.js"></script>  <script src="js/tile.js"></script>  <script src="js/local_storage_manager.js"></script>  <script src="js/game_manager.js"></script>  <script src="js/application.js"></script>

难道就是按这个顺序读吗？

No! 诸如此类的定义，就可以先略过去了。

XXX = function (XX) { ...... };    //  这个是函数、类、方法的定义XXX = { ...... };    //  这个是对象的定义

去掉这些，只剩 3 个文件了有木有，顿时感觉前途一片光明啊：

 |----animframe_polyfill.js |----classlist_polyfill.js |----application.js

初探

前两个文件是写在闭包中的，就可以说这三个文件之间的变量没什么好冲突的，咱就一个一个的看。

当看完 animframe_polyfill.js 的时候，我都有一种小高潮的感觉，嘻嘻。

代码包含空行，总共 29 行。包括两个变量定义、一个循环、两个判断。

就是为了实现，将 chrome 中的 webkitRequestAnimationFrame 和 firefox 中的mozRequestAnimationFrame 赋值给window.requestAnimationFrame 统一来使用，而对于不支持window.requestAnimationFrame 的浏览器，就给他定义一个方法吧。

虽然定义函数也很简单，但为了咱能尽快读完这个项目，就先把定义略过去吧。

同理，classlist_polyfill.js 中一些7788的东西，略！

入口

转眼，咱们来到了仅剩的一个文件 application.js。

这个文件带空行和注释，中共 5 行，如此简单，这就是走进新世界的入口了。

入口通过 animframe_polyfill.js 中定义的window.requestAnimationFrame ，调用了game_manager.js 中的GameManager 类，并实例化，同时作为参数，分别调用了 keyboard_input_manager.js 中的 KeyboardInputManager 类、html_actuator.js 中的HTMLActuator 类、local_storage_manager.js 中的fakeStorage 对象。

于是，一个神奇的调用网络，就诞生了。

深入

这里提到了 4 个类/对象，每个类/对象放在一个文件中，通过文件名、类/对象名都能联想到它起到的作用，这就让我们感到非常舒服。

接下来，你可以画一张思维导图，列出类中所有的方法名以及之间的调用。

结语

草草结束，希望能给你带来帮助。如果有幸能成为“大神”，我希望能写一篇大神如何读优秀 JS 开源项目。