jquery核心功能分析

標籤：style   class   blog   c   code   java   

zccst

核心功能包括：

jQuery是如何定義的，如何調用的，如何擴充的。掌握核心方法是如何?的，是理解jQuery源碼的關鍵。這裡理解了一切豁然開朗。

1，如何定義，即入口

// Define a local copy of jQuery
var jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor ‘enhanced‘
    return new jQuery.fn.init( selector, context, rootjQuery );//jQuery對象僅僅是建構函式jQuery.prototype.init加強版
}

 

2，jQuery的原型，及與jQuery.fn.init的關係

//定義對象方法，也即只有通過$("xx").的方式才能調用。

jQuery.fn = jQuery.prototype = {

    init:function( selector, context, rootjQuery ) {

        return jQuery.makeArray( selector, this );

    }

    其他還有很多屬性和方法，

    屬性有：jquery,constructor, selector, length

    方法有：toArray,get, pushStack,each, ready,slice, first,last,eq, map,end, push, sort, splice

...

}

 

//把jQuery.prototype賦給jQuery.prototype.init.prototype，是為了後面的執行個體化

// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;

也即是，$("xx")擁有了執行個體方法，可以調用。（調用jQuery.prototype下定義的方法）

 

3，extend擴充項物件方法和靜態方法原理

jQuery.extend = jQuery.fn.extend = function() {

    var target = arguments[0] || {};

    return target;

}

使用extend就方便了，無非就是$.extend({});和$.fn.extend({});如果你能在看到fn時理解聯想到是jQuery.prototype就好了。

再通過this範圍看一下：

$.extend ->this是$-> this.aa()

$.fn.extend->this是$.fn-> this.aa()

附extend實現細節：

使用情境：

1，擴充一些函數

只有一個參數。例如：$.extend({f1:function(){},f2:function(){},f3:function(){}})

2，合并多個對象到第一個對象

（1）淺copy，第一個參數是目標對象。例如

var a = {name:"hello"}

var b = {age:30}

$.extend(a,b);//a={name:"hello",age:30}

（2）深copy，第一個參數是TRUE，第二個參數是目標對象。例如

var a = {name:{job:"it"}};
var b = {name:{age: 30 }};
//$.extend(a,b);
$.extend(true,a,b);
console.log(a);

 1 jQuery.extend = jQuery.fn.extend = function() { 2     var options, name, src, copy, copyIsArray, clone, 3         target = arguments[0] || {}, 4         i = 1, 5         length = arguments.length, 6         deep = false; 7  8     // 是不是深複製  Handle a deep copy situation 9     if ( typeof target === "boolean" ) {10         deep = target;11         target = arguments[1] || {};12         // skip the boolean and the target13         i = 2;14     }15 16     // 不是物件類型  Handle case when target is a string or something (possible in deep copy)17     if ( typeof target !== "object" && !jQuery.isFunction(target) ) {18         target = {};19     }20 21     // 擴充外掛程式的情況  extend jQuery itself if only one argument is passed22     if ( length === i ) {//$.extend({f1:function(){},f2:function(){},f3:function(){}})23         target = this;//this是$,或是$.fn24         --i;25     }26 27     for ( ; i < length; i++ ) {//可能有多個對象擴充到第一個對象上28         // Only deal with non-null/undefined values29         if ( (options = arguments[ i ]) != null ) {//options是一個對象30             // Extend the base object31             for ( name in options ) {32                 src = target[ name ];  //src是target裡已經存在的value（也可能不存在）33                 copy = options[ name ];//copy是待合入的一個value34 35                 // 防止循環參考  Prevent never-ending loop36                 if ( target === copy ) {//例如：var a={};$.extend(a,{name:a});//可能導致循環參考37                     continue;38                 }39 40                 // if是深複製else是淺複製  Recurse if we‘re merging plain objects or arrays41                 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {42                     if ( copyIsArray ) {43                         copyIsArray = false;44                         clone = src && jQuery.isArray(src) ? src : [];45 46                     } else {47                         clone = src && jQuery.isPlainObject(src) ? src : {};48                     }49 50                     // 亮了，直至剝離至最深一層非物件類型，而且是逐個。Never move original objects, clone them51                     target[ name ] = jQuery.extend( deep, clone, copy );52 53                 // Don‘t bring in undefined values54                 } else if ( copy !== undefined ) {55                     target[ name ] = copy;//target[ name ] = options[ name ];56                 }57             }58         }59     }60 61     // Return the modified object62     return target;63 };