首页 > 你们是怎么分析框架或库的源码的?(前端)

你们是怎么分析框架或库的源码的?(前端)

昨天看程序员文章,大牛说到,其实阅读别人的代码或好的框架也是一种修型,之前看了一半,看不懂了,就不看了,不知道如何理解,大家有过阅读的经验吗,分享一下


我就拿JS说了
1.分析网站的JS
2.分析框架:
首先一定会用得比较熟了,然后去了解框架的基本原理/结构,网上各种搜资料和问人,然后自己尝试仿照写一个很简单的小框架。有时以为看懂了,也许是理解错的,只有实践了才知道正确答案。
拿我学习Jquery举例。Jquery是链式结构,那首先就得研究这个链式结构是如何做到的,其间上网去查/去问别人。了解了这个,我就开始自己尝试这写了一个这样的简单的链式框架,尝试着实现JQ的功能。抛开效率问题,我能完成大部分JQ的功能,从中学习到包括兼容性/如何调试代码/继承等知识。写的过程中会遇到问题,我就把JQ 2.0全部打印下来,在编辑器上根据各种跳转查看,理顺了逻辑,再记录到打印的纸上。很多东西是看不懂的,我就跳过,尽量把逻辑弄懂就行,然后自己想办法实现,这也是一个思考的过程。JQ源码有些注释,可以帮助理解。我写的时候也借鉴了学长写过的仿JQ的小框架,他的代码是压缩混淆过的,我读的时候费了很大劲。我写的这个尽量留了注释,有兴趣可以读下,有错欢迎指出。


Chrome Source面板
打断点,留意Call Stack


我一般都是带着问题去读框架的源码,这样我有自己的明确的目标,而不是漫无目的的去读源码


我觉得最好是从你用的功能开始入手来学习源代码,或者如果你要inject一些功能到lib里面的话,也是一个不错的出发点


从Mootools开始学习js,从zblog开始学习asp,从typecho开始学习php,之前相关经验为均0。
看不懂的百度,百度没有或不知道怎么百度的做记号,继续往后看。
过程中不断改写仿写代码、调试。


update:请把百度自行替换为谷歌或者bing。我刚开始学那会儿不懂搜索引擎的区别。


跟读所有其他语言源码一样, 根据作者拆分的模块(前端库开发阶段基本都是拆开开发的)一个个读,有注释就根据注释理解,没注释就自己理解,碰到不会的搞明白为止,知道作者那么做的用意是什么,学到这一点之后争取用到自己的项目中,OK。没那么多细节,就是学、想、做。细枝末节,各有习惯。


这里先假设你说的前端是指的web前端,则你常见的框架有两类,一类是简化跨浏览器开发的js类库,例如jquery、prototype等等;一类是前端控件库,例如bootstrap、extJs、jqueryUi等等。

如果你想学习第一类框架,这个好说,把javscript的作用域、原型、常用创建对象方法、常用继承机制的实现方法、基于http协议的ajax实现机制(websocket、comet也有了解的必要)、浏览器内部工作原理这些平时没人拿到台面上讲的东西烂熟于心即可看懂现有的所有类库。

如果你想熟悉第二类“框架”,也就是前端控件库,首先你要先做到上一段讲的东西,如果你关注的框架是个国外的项目,那么HTML5/CSS3也是必须要熟悉的,特别是CSS3的选择器,再就是了解重置浏览器样式、栅格化、自适应布局这些“思想”层次的东西,先了解原理再阅读相关代码;遇到例如“margin值是负数”这种“小技巧”更是要找到让自己真正信服的依据,随感觉走没用,下次碰到了;

还有一些同时与两类框架有关的知识点也是要预先了解的,更确切的说法叫js脚本开发的基本功,例如js算法、js设计模式等;这些常在框架中有所呈现,但是带有浓厚的个人色彩,容易让阅读代码的其他人误入歧途;对于跨浏览器的问题,正确的做法是先学习“现代浏览器”中的js,然后再类比学习其它不符合W3C或ECMAScript5规范的浏览器。

推荐一本书:《javascript高级程序设计》人民邮电出版社 Nicholas C.Zakas 著
推荐一篇文章:浏览器内部工作原理 http://kb.cnblogs.com/page/129756/

【热门文章】
【热门文章】