说到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. UITabBarController+微博简单模拟1

    UITabBarController是IOS中很常用的一个viewController.UITabBarController通常作为整个程序的rootViewController,而且不能添加到别的c ...

  2. html基础之 表单提交方法

    最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...

  3. USACO 1.3... 虫洞 解题报告（搜索+强大剪枝+模拟）

    这题可真是又让我找到了八数码的感觉...哈哈. 首先,第一次见题,没有思路,第二次看题,感觉是搜索,就这样写下来了. 这题我几乎是一个点一个点改对的(至于为什么是这样,后面给你看一个神奇的东西),让我 ...

  4. AngularJs中关于ng-class的三种使用方式说明

    在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一 ...

  5. Thinkphp excel导入导出

    挺有用处的存一下 1.去PHPexcel 官网下载最新的程序下来 ☞   飞机在这里 我用的是1.78 放在vender 里面 在  function.php 写两个方法 路径当然是这个 ☞Commo ...

  6. php cli 模式下执行文件，require 加载路径错误

    今天,同事突然告诉我,我写的一个做计划任务的php脚本执行总是不成功. 脚本本身很简单,里面只有包含了几个库文件并执行了一个函数,函数应该没有错误,这个函数在别处也调用过,没有问题.我在本地用浏览器访 ...

  7. python super研究

    # encoding=utf-8 class A(object): def __init__(self): print "初始化a" def run(self): print &q ...

  8. python操作redis-hash

    #!/usr/bin/python #!coding: utf-8 import redis if __name__=="__main__": try: conn=redis.St ...

  9. Jquery一个slideToggle搞定div的隐藏与显示

    Jquery一个slideToggle搞定div的隐藏与显示 <!DOCTYPE html> <html> <head> <script src=" ...

  10. GDAL的RASTERIO功能

             为了能快速的显示大影像,最近一直在学习GDAL,GDAL确实是一个功能强大的开源库,其核心部分数据集和波段,下面这个图很详细的描述了它们之间的关系,还有其中的细节:     GDAL ...