说到jQuery, 大家可能直觉的认为jQuery的源码应该就是一个jquery.xx.js这样的一个文件. 但是看到真正的源码的时候, 整个人都思密达了.jQuery的源码做的事远比你想象的多, 为了保证代码的可维护性, 健壮性, 通用性等等, jQuery将各个功能模块独立成单个的js文件, 并通过依赖管理管理模块之间的依赖关系, 在构建的时候通过这种依赖关系将各个模块合并成一个js文件, 最后经过压缩混淆等步骤才会产生我们经常用的jquery.xx.min.js文件( q君:上来就说这些恶心的东西, 大家看不懂要跳过啊! ).
源码来源:
github: https://github.com/jquery/jquery
源码版本:
2.1.1: https://github.com/jquery/jquery/archive/2.1.1.zip
目录结构:
/ ----build/ 构建jQuery代码用的一些文件 ----dist/ 构建完成产生的文件 ----src/ 源码文件, 这是本系列文章主要分析的内容 ----test/ 测试相关, 主要为了保证代码的健壮性 ----其他文件 包括grunt, bower jshint相关的配置
src/是jQuery真正的代码, 里面包含jQuery的各个功能模块, 接下来我们会逐步分析每一个模块.
辅助环境搭建:
在根目录下创建analysis目录, 用来辅助分析源码, 方便调试, 观察代码运行的一些细节.
分析过程中, 我会在analysis目录下创建很多html用于加载源码的各个模块. 以core为示例, 创建core.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>core</title> </head> <body> <script src="require.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> require(['../src/core.js'], function($) { console.log($); }) </script> </body> </html>
require.js是针对AMD规范做的一个类库, AMD即Asynchronous Module Definition(异步模块加载机制), 提供异步加载和依赖管理支持.( q君: 这个不是做CPU的AMD啦! ) jQuery的源码采用AMD, 或者说是遵循requirejs方式定义每一个模块, 所以我们通过requirejs来正确加载jQuery模块代码.
更多细节可参阅requirejs官网: http://www.requirejs.org/
附件:
源码+analysis目录 : http://yunpan.cn/Q75WBaPr4RkT8 提取码 8469