jQuery 源码分析和使用心得 - 关于源码

浏览数：59 / 时间：2015年06月09日

　　说到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/