番外:菜鸟如何读优秀 JS 开源项目之“2048”
2014-08-27 15:53
295 查看
Bolt_白衣苍狗发布在
My Code Wars 我的代码战争view:1495
在 github 找到分支最多的
我和朋友都是菜鸟,打开
世上无难事,只怕你放弃。我还是硬着头皮从头到尾看了一遍,心中大呼:
这代码真他 markdown 的优秀,虽然我不知道啥叫优秀的代码。
难道就是按这个顺序读吗?
No! 诸如此类的定义,就可以先略过去了。
去掉这些,只剩
当看完
代码包含空行,总共 29 行。包括两个变量定义、一个循环、两个判断。
就是为了实现,将 chrome 中的
虽然定义函数也很简单,但为了咱能尽快读完这个项目,就先把定义略过去吧。
同理,
这个文件带空行和注释,中共 5 行,如此简单,这就是走进新世界的入口了。
入口通过
中的
中的
于是,一个神奇的调用网络,就诞生了。
接下来,你可以画一张思维导图,列出类中所有的方法名以及之间的调用。
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 开源项目。
相关文章推荐
- 教你如何发现优秀的开源项目?
- 如何发现优秀的开源项目?
- 如何在 Github 上发现优秀的开源项目
- 如何在 Github 上发现优秀的开源项目?
- 如何在 Github 上发现优秀的开源项目?
- 如何在 Github 上发现优秀的开源项目?
- 从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
- 从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
- 如何在GitHub上发现优秀的开源项目
- 从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
- 如何发现优秀的开源项目?
- GitHub自学系列之七「如何发现优秀的开源项目?」
- 如何发现优秀的开源项目
- 从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
- 从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
- 如何发现优秀的开源项目?
- 如何发现优秀的开源项目?
- 如何发现优秀的开源项目?
- 从0开始学习 GitHub 系列之「08.如何发现优秀的开源项目」
- 如何在 Github 上发现优秀的开源项目?