在網上下了一個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]之基本架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。