从架构入手轻松读懂框架源码-以jQuery，Zepto，Vue和lodash-es为例

不知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码，开始看，一行一行的看下去，看了几行就感觉，“我艹，这什么玩意儿”，然后就看不下去了。如果你有类似的经历，可以看看本文，本文会讲解几种常见的开源框架的代码架构，从架构出发，帮你轻松读懂框架源码。记住以下两个要点：

1. 不要试图一行一行的往下读
2. 先找入口，再理架构，依流程读下去

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 ,这个方法也可以直接在文件里面搜到，我们发现他支持几种 <