码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-15 21:03:39      阅读:247      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   使用   java   ar   文件   

  说到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 源码分析和使用心得 - 关于源码

标签:style   blog   http   color   io   使用   java   ar   文件   

原文地址:http://www.cnblogs.com/chris-hus/p/jquery-analysis-about-src.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!