在网上下了一个jQuery 1.2.6的源码分析教程，看得似懂非懂，于是还是去github上下载源码，然后慢慢看源代码学习，首先来说说core.js这个核心文件吧。

jQuery整体的基本架构说起来也并不复杂，但是要看明白还是要花一点功夫，core.js这个文件搭建起了jQuery的整个框架，该文件的基本内容我大致总结如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//将整个jQuery 对象作为一个外部接口
var jQuery = (function(){
var jQuery = function( selector, context ) {
        //当执行形如$("p")的代码时会new一个jQuery.fn.init的对象，此对象一般我们称之为jQuery对象，下文中我将称其为jQuery实例对象，以与jQuery对象本身区分开来
        return new jQuery.fn.init( selector, context, rootjQuery );
    },/*
    ...
    此处包含一些其他的变量，如正则表达式，useragent等
    ...
    */
//此处之所以把jQuery的原型与jQuery.fn绑定是因为fn可以作为其短名称出现
jQuery.fn = jQuery.prototype = {
//jQuery对象的原型所在，其中的方法和属性可由jQuery实例对象访问
    init ：function(){
        //用以构建jQuery实例对象，最后返回一个类数组对象
    },
    /*
    ...
    其他属性和方法，例如length，jquery版本，以及许多访问jquery数组元素的方法
    如：eq，get 等。
    ...
    */
}
//绑定jQuery对象的原型链
jQuery.fn.init.prototype = jQuery.fn;
//extend 可由 jQuery对象（静态方法）以及实例对象（实例方法）访问
jQuery.extend = jQuery.fn.extend =  function(){
    /*
    ...
    jQuery本身的所有内容几乎都是由extend方法所扩展的，包括jQuery插件机制也建立在此方法之上
    该方法，
    ...
    */
};
jQuery.extend({
    /*
    jQuery自身核心的一些方法和属性，
    包括 noConflict，isReady等
    */
});
/*
...
此处是一些其他操作，例如浏览器检测，处理ready事件等
...
*/
//最后返回jQuery供外部使用(作为全局对象）
return jQuery;
})();

可以看出jQuery大致分为两个部分，一个是静态方法部分，一个是实例对象部分，而这两者都是通过同一个函数extend来进行扩展的，也许上面代码看起来还比较抽象，下图则描述了整个框架的关系：

这样整个结构就显得清晰多了。其中最右边的jQuery实例是通过new jQuery.fn.init得到的。这样，扩展到jQuery.fn上的方法即可以作为实例方法供jQuery实例访问，而扩展到jQuery对象本身上的方法则作为静态方法。

在core.js中调用了extend来扩展绝大部分核心方法，首先来分析一下extend方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {}, //将第一个参数作为扩展的目标对象
        i = 1,
        length = arguments.length,
        deep = false;
    // Handle a deep copy situation
    //可以传递一个bool值进来用于表示扩展对象时是否是深拷贝
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }
    // Handle case when target is a string or something (possible in deep copy)
    // 当扩展对象是字符串时
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }
    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
    // 关键！!当调用$.extend时，this将绑定到jQuery对象上，此时扩展的方法或者属性将是静态的，
    // 而调用$.fn.extend时则绑定到jQuery.fn上，此时扩展的均是实例方法，我们在撰写插件时可以在方法内部使用this，此时的this指向的是jQuery的实例对象
        target = this;
        --i;//修正i，以便后面正确遍历对象
    }
    //以下便是扩展代码，既可以用于扩展jQuery，也可以用来扩展自定义的对象，此方法是公开的，更多可以参考jQuery文档
    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];
                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }
                // Recurse if we're merging plain objects or arrays
                // 如果是合并普通对象或者数组时，采用递归方式进行深拷贝（比如当数组中嵌套数组或者对象嵌套对象时）
                // 在jQuery内部核心扩展方法时并没有用到此段代码，比如下面的isPlainObject，isArray方法都是用extend扩展到jQuery中的。
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : []; //
                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }
                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );
                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }
    // Return the modified object
    return target;
};

转载于:https://www.cnblogs.com/yhspehy/p/6064517.html

(转载)jQuery 1.6 源码学习（一）——core.js[1]之基本架构相关推荐

  1. jQuery 1.6 源码学习（六）——core.js[6]之jQuery对象/数组操作相关方法

    本文将分析jQuery对象操作相关方法(包括静态和实例方法): merge方法,代码如下: //此方法用于合并两个jQuery对象(因为jQuery对象中有length属性)或者数组,//这个方法非常 ...

  2. jQuery1.3.2 源码学习 -1 $ 是什么？jQuery 又是什么？

    jQuery1.3.2  源码学习 本源码使用当前的 jQuery 1.3.2 版本,下载时间 2009-4-25,下载网站:jquery.com. 一个函数 1 /*! 2  * jQuery Ja ...

  3. jQuery源码学习之Callbacks

    jQuery源码学习之Callbacks jQuery的ajax.deferred通过回调实现异步,其实现核心是Callbacks. 使用方法 使用首先要先新建一个实例对象.创建时可以传入参数flag ...

  4. jquery源码学习笔记三：jQuery工厂剖析

    jquery源码学习笔记二:jQuery工厂 jquery源码学习笔记一:总体结构 上两篇说过,query的核心是一个jQuery工厂.其代码如下 function( window, noGlobal ...

  5. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  6. JDK源码学习笔记——Integer

    一.类定义 public final class Integer extends Number implements Comparable<Integer> 二.属性 private fi ...

  7. Vuex源码学习（五）加工后的module

    没有看过moduleCollection那可不行!Vuex源码学习(四)module与moduleCollection 感谢提出代码块和截图建议的小伙伴 代码块和截图的区别: 代码块部分希望大家按照我 ...

  8. spring源码学习之路---深入AOP（终）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 上一章和各位一起看了一下sp ...

  9. 以太坊源码学习 -- EVM

    以太坊源码学习 – EVM 学习文档链接:here 一.虚拟机外 主要功能: 执行前将Transaction类型转化成Message,创建虚拟机(EVM)对象,计算一些Gas消耗,以及执行交易完毕后创 ...

最新文章

  1. 【Spring】spring基于注解的声明式事务控制
  2. C语言--static修饰函数
  3. 建议被降级降薪员工主动辞职？网友炸了！
  4. mkl win10安装
  5. LeetCode 819. Most Common Word
  6. Python list列表的使用（增删改查）
  7. 《Do Neural Dialog Systems Use the Conversation History Effectively? An Empirical Study》
  8. 转载-extern “C”用法分析
  9. linux boot分区有什么用,/ boot分区的真正作用是什么？
  10. J Red-Black Paths(ICPC网络赛第一场)
  11. linux shell if -a 到-z参数含义
  12. hadoop 之NullWritable与ObjectWritable
  13. arcgis js api前端完成面积测算
  14. python如何判断QQ是否在线？
  15. 他在计算机上工作英语翻译,英语翻译1.尽管他在手术中割破了手,但他仍在继续工作.（in spite of）2.计算机在现代生活中起着重要的作用.（...
  16. 基于asp.net基层部队后勤管理系统的设计与实现
  17. java分页数据再次进行分页操作
  18. 苹果4s怎么越狱教程_苹果手机:使用Rollectra工具清除iOS11.3～11.4beta3越狱教程
  19. xlsxwriter php,xlsxwriter(PHP工作表插件)
  20. python用函数求一个数的所有因数_python编程从零基础到项目实践第六章学习---函数 一个完整的求因数函数的完善步骤...

热门文章

  1. 黑客演示通过空中电视信号DVB-T攻击智能电视机
  2. 前端rem单位的正确使用姿势(转)
  3. CentOS6.5环境使用keepalived实现nginx服务的高可用性及配置详解
  4. UltraEdit正则表达式介绍及实例
  5. jQuery技术内幕：深入解析jQuery架构设计与实现原理
  6. 35佳国外顶级品牌企业网站设计案例(上)
  7. 向页面中添加音乐或flash
  8. 如何配置Windows Live Writer
  9. php安装redis扩展详细步骤 不会可以加QQ
  10. [Tips]Linux在命令行中打开图形化程序的各种命令