深度解析jquery中的核心功能

核心功能包括：

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.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.m

##        return jQuery.m

## ector,

#    }

    其他仍有許多屬性與方法，

    屬性有：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下定義的方法）

為什麼jQuery要回傳jQuery.fn.init物件?

jQuery = function( selector, context ) {

#// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context, rootjQuery );

#}

jQuery.fn = jQuery.prototype = {

    ……

}

jQuery.fn.init.prototype = jQuery.fn;

在stackoverflow 上找到類似問題：

http://stackoverflow.com/questions/4754560/help-understanding-jquerys-jquery-fn-init-why-is-init-in-fn

#還有這個

http://stackoverflow.com/questions/1856890/why-does-jquery-use-new-jquery-fn-init-for-creating-jquery-object-but-i-can/1858537#1858537

I believe the code is written in this fashion so that the new keyword is not required each time you instantiate a new jQuery object and also to delegate the logic behind the object construction to the prototype The for delegate the logic behind the object construction to the prototype The former to make the library cleaner to use and the latter to keep the initialisation logic cleanly in one place and allow init to be recursively called to construct and return an object that correctly matches the passed arguments and return an object that correctly matches the passed arguments.##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);

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
    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({f1:function(){},f2:function(){},f3:function(){}})
        target = this;//this是$,或是$.fn
        --i;
    }

    for ( ; i <br>jQuery. extend({…})分析<br>看一下如何寫的<p><br>jQuery.extend({<br></p>prop:""<p></p>method:function( ){}<p></p>});<p></p>可以看出，這些方法是jQuery的靜態屬性和方法（也即是工具方法），將來既可以直接提供給使用者使用，也可以在內部使用。 <p></p>具體實作的工具屬性和方法有（同時也標註了哪些在內部使用）<p></p><p>jQuery.extend({<br><br>        expando  :  產生唯一JQ<a href="http://www.php.cn/wiki/57.html" target="_blank">字串</a>(內部)<br><br>        noConflic:t()<br><br>       DOM是否已載入(內部)<br><br>        readyWait  :  等待檔案的計數器(內部)<br><br>        holdRead <br><br>        isFunction()  :  是否為函數<br><br>        isArray()  :  是否為陣列      isNumeric()  :  是否為數字<br><br>        type()  :  判斷<br>資料型別<br><br><br>        isPlainObject()  :  是否為物件自變數為自變數或符號為「加總<br><br>        error()  :  <a href="http://www.php.cn/code/5808.html" target="_blank">拋出例外 </a><br><br>        parseHTML()  :  <br>      parseXML ()  :  解析XML<br><br>        noop()  :  空函數<br><a href="http://www.php.cn/php/php-tp-throw.html" target="_blank">        globalEval( </a>        nodeName( )  :  是否為指定節點名(內部)<br><br>        each()  :  遍歷集合<br><br>       真數組<br><br>        inArray()  :  陣列版indexOf<br><br>        merge()  :  合併陣列     map()  :  映射新陣列<br><br>        guid  :  唯一識別碼(內部)<br><br>        proxy()  :  調整至 #        now()  :  目前時間<br><br>        swap()  :  CSS交換(內部)<br><br>}); DOM的非同步運算(內部)<br><br>function isArraylike(){}  類似陣列的判斷(內部)<br></p>

以上是深度解析jquery中的核心功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！