番外:菜鸟如何读优秀 JS 开源项目之“2048”
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前戏

今天心血来潮,和朋友突然想到要看一下那个大名鼎鼎的 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 开源项目

评论
发表评论
5年前
赞了此文章!
WRITTEN BY
BoltDoggy
A doggy named Bolt.
TA的新浪微博
PUBLISHED IN
My Code Wars 我的代码战争【休息一下】

这里讲述的是一个8级(kyu)菜鸟立志成为8段(dan)大神的故事。

他在代码战争中一次次遭遇挫败,而又在乱炖中获得高人指点。

遥想当年自高自大,而今终知天外有天。

坚持要走出一条自己的路,这是一条不归路。


Bolt 在写underscore.js源码分析专栏的时候发现了一个问题,就是看别人写的代码的时候自认为看懂了,但实际上有理解错误自己也不知道。

另外就是看了再牛逼的代码,自己写的时候,还是那些小套套。

于是 Bolt 开了一个新专栏:My Code Wars 我的代码战争。在同一需求下,菜鸟写的代码与大神有什么区别,是思维方式不同,还是什么原因导致的?

欢迎大家来新专栏提供意见和建议。

我的收藏