前戏
今天心血来潮,和朋友突然想到要看一下那个大名鼎鼎的 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
类、
KeyboardInputManagerhtml_actuator.js
中的HTMLActuator
类、local_storage_manager.js
中的fakeStorage
对象。
于是,一个神奇的调用网络,就诞生了。
深入
这里提到了 4 个类/对象,每个类/对象放在一个文件中,通过文件名、类/对象名都能联想到它起到的作用,这就让我们感到非常舒服。
接下来,你可以画一张思维导图,列出类中所有的方法名以及之间的调用。
结语
草草结束,希望能给你带来帮助。如果有幸能成为“大神”,我希望能写一篇大神如何读优秀 JS 开源项目
。