首页 > 代码库 > jQuery 源码分析和使用心得 - 关于源码

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

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

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