jQuery源码阅读1:jQuery对象的生成

Posted on   |   In   |  

最近比较忙, 不过还是想看看jQuery源码.
晚上大概翻了一下 好多看不懂的…
试着拆解一下 希望在博客里强制自己叙述出来 能稍微多看懂一点点.

阅读源码的版本是”1.8.3+1”, 因为一直在用这个版本,更高级的版本怕连api都不熟 那就更没得看了…
第一步先来分析下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
(function( window, undefined ) {
/**
 * ruantao1989@gmail.com
 */
var 
    rootjQuery,
    //一: Define a local copy of jQuery
    jQuery = function( selector, context ) {
        //不论是不是用"new" jQuery(), 都会返回new jQuery.fn.init().
        return new jQuery.fn.init( selector, context, rootjQuery );
    };
 
     
    //二: jQuery对象原型. 功力不够, 原型链这块没完全理清...
    //应该是为了保护jQuery.prototype, 所以将jQuery.prototype赋给fn, 插件等只操作fn而非prototype
    jQuery.fn = jQuery.prototype = {
        //原型链中指定constructor指针, 否则第一级链中没有constructor对象, 第二辑链constructor直接指向Object()
        constructor: jQuery,
        //init貌似负责处理具体的选择器
        init: function( selector, context, rootjQuery ) {
            //这里会根据传参, 处理有各种情况
        },
        //其他一堆静态方法...后续分析
    };
     
     
    //三: 这句最tm难理解:
    //1.因为第一部分返回jQuery对象等于return new jQuery.fn.init(), 所以要想操作新生jQuery对象的prototype,我们手上有两种方法:①是操作jQuery.fn.init.prototype,②是直接写jQuery.prototype.someFun = function(){};
    //2.又因为第二部分的目的就是为了保护jQuery.prototype, 所以我们不能用类似jQuery.prototype.someFun = function(){};的写法
    //3.所以最终我们的选择是操作jQuery.fn(如jQuery.fn.extend()), 而后jQuery.fn.init.prototype = jQuery.fn;
    jQuery.fn.init.prototype = jQuery.fn;
 
    //jQuery对象赋给window.$和window.jQuery, 方便访问
    window.jQuery = window.$ = jQuery;
})(window);
 
 
//1实验用new
var $obj_withNew = new jQuery("用new构造对象");
console.log($obj_withNew);
//2实验不用new
var $obj_withoutNew = $("折腾半天 可以不用new了");
console.log($obj_withoutNew);
 
//结论是经过如此这般折腾, 产生的对象是一样的