不知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码,开始看,一行一行的看下去,看了几行就感觉,“我艹,这什么玩意儿”,然后就看不下去了。如果你有类似的经历,可以看看本文,本文会讲解几种常见的开源框架的代码架构,从架构出发,帮你轻松读懂框架源码。记住以下两个要点:
- 不要试图一行一行的往下读
- 先找入口,再理架构,依流程读下去
jQuery
以jQuery为例,来看看他的基本架构,然后再来一步步看看这个是什么意思:
找入口
我们这里用的版本是3.4.1, 我们用npm将jQuery下载下来,然后去 node_modules
里面找到他。
打开 package.json
,找到 main
属性,这个属性是我们程序引入它时查找的路径,通常就是程序的入口文件。如果没有这个属性,入口一般是目录下的 index.js
文件:
"main": "dist/jquery.js", 前端学习裙:950.919.261
理结构
我们打开 dist/jquery.js
,发现他有上万行代码,瞬间心里有点懵逼,但是不要怕!我们把最外层的函数都折叠起来,外层结构瞬间清晰了:
(请忽略图上我的complexity插件。)这个外层结构不就是一个自执行函数吗?他往里面传了两个参数,一个是global,一个是factory。global很好理解,判断一下是不是浏览器,如果是浏览器就把window传进去,如果不是,就传this。这里有个技巧是将window作为参数传进去,而不是直接在函数内部去拿window,这是因为在里面拿会一层层往上找才能拿到,会比较慢。
第二个参数factory看名字是个工厂,我们展开上面的函数看看:
先是做了一些检测,兼容CommonJS和node.js,其实核心代码就一行:
factory( global );
将global作为参数调用了factory,看来jQuery真正的核心还是这个factory方法,他其实就是外面传进来的第二个参数,我们展开它,发现这个方法有一万行代码,果然是核心,这下又不知道怎么入手了。这时候想想我们使用jQuery的时候是怎么用的,我们都是直接用 $
就调用了,说明他肯定在window上挂载了一个 $
,直接在代码里面搜 window.$
,找到了:
这下我们找到了jQuery真正的对象 jQuery
,这里可以直接通过编辑器跳转到定义,发现 jQuery
也是一个很简单的方法.
这个方法直接调用了 jQuery.fn.init
,这个方法也可以直接在文件里面搜到,我们发现他支持几种 <