说到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 源码分析和使用心得 - 关于源码的更多相关文章

  1. Tomcat源码分析一：编译Tomcat源码

    Tomcat源码分析一:编译Tomcat源码 1 内容介绍 在之前的<Servlet与Tomcat运行示例>一文中,给大家带来如何在Tomcat中部署Servlet应用的相关步骤,本文将就 ...

  2. Android源码分析（十一）-----Android源码中如何引用aar文件

    一:aar文件如何引用 系统Settings中引用bidehelper-1.1.12.aar 文件为例 源码地址:packages/apps/Settings/Android.mk LOCAL_PAT ...

  3. jQuery 源码分析和使用心得 - 序

    众所周知, jQuery (个人简称为jq) 在前端开发中占有着非常重要的地位, 可以说jQuery的存在大大降低了学习网页设计和交互的门槛, 他的简单的语法和顺畅的使用逻辑激发了人们强烈的学习兴趣, ...

  4. $Django cbv源码分析 djangorestframework框架之APIView源码分析

    1 CBV的源码分析 #视图 class login (View): pass #路由 url(r'^books/$', views.login.as_view()) #阅读源码: #左侧工程栏--- ...

  5. 第十篇：Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 query

    /** Spark SQL源码分析系列文章*/ 前面讲到了Spark SQL In-Memory Columnar Storage的存储结构是基于列存储的. 那么基于以上存储结构,我们查询cache在 ...

  6. 第九篇：Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 cache table

    /** Spark SQL源码分析系列文章*/ Spark SQL 可以将数据缓存到内存中,我们可以见到的通过调用cache table tableName即可将一张表缓存到内存中,来极大的提高查询效 ...

  7. 深度 Mybatis 3 源码分析（一）SqlSessionFactoryBuilder源码分析

    MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java ...

  8. JDK1.8源码分析03之idea搭建源码阅读环境

    序言:上一节说了阅读源码的顺序,有了一个大体的方向,咱们就知道该如何下手.接下来,就要搭建一个方便阅读源码及debug的环境.有助于跟踪源码的调用情况. 目前新开发的项目, 大多数都是基于JDK1.8 ...

  9. Android源码分析（四）-----Android源码编译及刷机步骤

    一 : 获取源码: 每个公司服务器地址不同,以如下源码地址为例: http://10.1.14.6/android/Qualcomm/msm89xx/branches/msm89xx svn环境执行: ...

随机推荐

  1. sizeof 和 strlen

    1. sizeof 1.1 sizeof是一个独立的运算符,不是函数.sizeof给我们提供有关数据项目所分配的内存的大小.例如: 1 2 cout << sizeof(long) < ...

  2. ps 网页配图设计

    网站配图设计 蒙太奇 品科软件---网页页面 1橡皮擦来画两图 容合 大橡皮擦擦出来自然 2图放到一个色块中 用剪贴蒙版 3调色阶 装饰下图片  矩形工具  形状  填充 画彩条 超出本框的怎么去掉多 ...

  3. node学习 process笔记

    如果你是node大神好了可以关闭此页面了因为接下来游览会白白浪费你许多时间,最近一直学习node.js今晚看到 alsotang 在 github上的node教程 https://github.com ...

  4. mysql中,执行delete语句时出现Lock wait timeout exceeded问题

    问题描述: 当我插入一条记录时,在调用save方法的时候出现了异常(记录重复了),导致了后面的commit语句不能执行了.这时我在数据库中删除重复记录时发现该表已经被锁上了.即出现错误.但过了一会再次 ...

  5. BootStrap 模态框禁用空白处点击关闭，手动显示隐藏，垂直居中

    $('#ajax_wait').modal({ backdrop: 'static', keyboard: false }); backdrop:static ,空白处不关闭. keyboard:fa ...

  6. 最少步数（bfs）

    最少步数 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...

  7. FormSheet式模态视图，点击模态视图外隐藏模态视图的方法

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  8. Redis存储Session

    net Core 使用Redis存储Session   前言 Asp.net Core 改变了之前的封闭,现在开源且开放,下面我们来用Redis存储Session来做一个简单的测试,或者叫做中间件(m ...

  9. Nginx 配置指令的执行顺序（七）

    来看一个 ngx_static 模块服务磁盘文件的例子.我们使用下面这个配置片段:     location / {        root /var/www/;    } 同时在本机的 /var/w ...

  10. Activity和View的区别：

    Activity和View的区别: activity相当于控制部分,view相当于显示部分.两者之间是多对多的关系,所有东西必须用view来显示.  viewGroup继承自view,实现了ViewM ...