在网上下了一个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;
};

(转载)jQuery 1.6 源码学习(一)——core.js[1]之基本架构的更多相关文章

  1. (转载)jQuery 1.6 源码学习(二)——core.js[2]之extend&ready方法

    上次分析了extend方法的实现,而紧接着extend方法后面调用了jQuery.extend()方法(core.js 359行),今天来看看究竟core.js里为jQuery对象扩展了哪些静态方法. ...

  2. python源码学习(一)——python的总体架构

    python源码学习(一)——python的总体架构 学习环境: 系统:ubuntu 12.04 STLpython版本:2.7既然要学习python的源码,首先我们要在电脑上安装python并且下载 ...

  3. metamask源码学习-ui/index.js

    The UI-即上图左下角metamask-ui部分,即其图形化界面 The MetaMask UI is essentially just a website that can be configu ...

  4. chrome源码学习之:js与底层c++的通信

    以查询历史记录为例: 1.在上层history.js中通过chrome.send()来向底层发送事件请求和相关参数,其中'queryHistory'为信号名称,[this.searchText_, t ...

  5. vue 源码学习----build/config.js

    1. process 这个process是什么?为何都没有引入就可以使用了呢? process 对象是一个 global (全局变量),提供有关信息,控制当前 Node.js 进程.作为一个对象,它对 ...

  6. jquery 源码学习(一)

    从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...

  7. jquery源码学习(一)——jquery结构概述以及如何合适的暴露全局变量

    jQuery 源码学习是对js的能力提升很有帮助的一个方法,废话不说,我们来开始学习啦 我们学习的源码是jquery-2.0.3已经不支持IE6,7,8了,因为可以少学很多hack和兼容的方法. jq ...

  8. jQuery源码学习感想

    还记得去年(2015)九月份的时候,作为一个大四的学生去参加美团霸面,结果被美团技术总监教育了一番,那次问了我很多jQuery源码的知识点,以前虽然喜欢研究框架,但水平还不足够来研究jQuery源码, ...

  9. jquery源码学习笔记三:jQuery工厂剖析

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

随机推荐

  1. 8.mvc core上传文件

    以下方法均是个人,仅供参考 public interface IFileHelper { /// <summary> /// 保存文件 (返回 Test.jpg) 出错就返回 error| ...

  2. python之路4

    迭代器&生成器 迭代器: 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么, 因为人们很少在迭代途中往后 ...

  3. Java-坦克大战

    利用Java语言中的集合.Swing.线程等知识点编写一个坦克大战游戏.(1) 画出敌我坦克的原理:在坦克类里面有一个布尔类型变量good.用于判断坦克的阵营,在创建坦克对象时在Tank类的构造方法中 ...

  4. Python中MySQLdb模块的安装

    安装 MySQLdb是Python语言访问mysql数据库的一个模块,如果你不确定自己的Python环境中是否已经安装了这个模块,可以打开Python shell,输入import MySQLdb,如 ...

  5. reactive-turtle

    reactive-turtle 标签(空格分隔): Scala Github 偶然在Github上看到一个有意思的小项目,一个粑粑教11岁的儿子学习scala,因为学习语法等太枯燥了,所以写了一个海龟 ...

  6. Ext5实现树形下拉框ComboBoxTree

    最近为了实现一个属性下拉框被Ext框架折腾了好几天.. 所以,首先要说的是,不管你要做什么系统.强烈建议你不要选择Ext.据我这几天的搜索,应该这个框架现在用的人也很少了. Ext框架的缺陷:框架沉重 ...

  7. 合并文件夹里多个excel

    Sub 合并当前目录下所有工作簿的全部工作表() Dim MyPath, MyName, AWbName Dim Wb As workbook, WbN As String Dim G As Long ...

  8. 设置float之后vertical-align失效

    相关博文: 关于Vertical-Align你需要知道的事情 https://segmentfault.com/a/1190000002668492

  9. PHP基础算法

    1.首先来画个菱形玩玩,很多人学C时在书上都画过,咱们用PHP画下,画了一半. 思路:多少行for一次,然后在里面空格和星号for一次. <?php for($i=0;$i<=3;$i++ ...

  10. 【转】Unix NetWork Programming——环境搭建(解决unp.h等源码编译问题)

    下面开始用简单但典型的客户端和服务器端程序说明如何进行网络编程.这一小节讲的是客户端,一个用来连接并读取服务器发送来的时间的客户端. 这里涉及到了编写代码,因此要 搭建unix网络编程环境 unix系 ...