在網(wǎng)上下了一個(gè)jQuery 1.2.6的源碼分析教程，看得似懂非懂，于是還是去github上下載源碼，然后慢慢看源代碼學(xué)習(xí)，首先來(lái)說(shuō)說(shuō)core.js這個(gè)核心文件吧。

jQuery整體的基本架構(gòu)說(shuō)起來(lái)也并不復(fù)雜，但是要看明白還是要花一點(diǎn)功夫，core.js這個(gè)文件搭建起了jQuery的整個(gè)框架，該文件的基本內(nèi)容我大致總結(jié)如下：

?

?

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

//將整個(gè)jQuery 對(duì)象作為一個(gè)外部接口 var?jQuery = (function(){ var?jQuery = function( selector, context ) { ????????//當(dāng)執(zhí)行形如$("p")的代碼時(shí)會(huì)new一個(gè)jQuery.fn.init的對(duì)象，此對(duì)象一般我們稱之為jQuery對(duì)象，下文中我將稱其為jQuery實(shí)例對(duì)象，以與jQuery對(duì)象本身區(qū)分開(kāi)來(lái) ????????return?new?jQuery.fn.init( selector, context, rootjQuery ); ????},/* ????... ????此處包含一些其他的變量，如正則表達(dá)式，useragent等 ????... ????*/ //此處之所以把jQuery的原型與jQuery.fn綁定是因?yàn)閒n可以作為其短名稱出現(xiàn) jQuery.fn = jQuery.prototype = { //jQuery對(duì)象的原型所在，其中的方法和屬性可由jQuery實(shí)例對(duì)象訪問(wèn) ????init ：function(){ ????????//用以構(gòu)建jQuery實(shí)例對(duì)象，最后返回一個(gè)類數(shù)組對(duì)象 ????}, ????/* ????... ????其他屬性和方法，例如length，jquery版本，以及許多訪問(wèn)jquery數(shù)組元素的方法 ????如：eq，get 等。 ????... ????*/ } //綁定jQuery對(duì)象的原型鏈 jQuery.fn.init.prototype = jQuery.fn; //extend 可由 jQuery對(duì)象（靜態(tài)方法）以及實(shí)例對(duì)象（實(shí)例方法）訪問(wèn) jQuery.extend = jQuery.fn.extend =? function(){ ????/* ????... ????jQuery本身的所有內(nèi)容幾乎都是由extend方法所擴(kuò)展的，包括jQuery插件機(jī)制也建立在此方法之上 ????該方法， ????... ????*/ }; jQuery.extend({ ????/* ????jQuery自身核心的一些方法和屬性， ????包括 noConflict，isReady等 ????*/ }); /* ... 此處是一些其他操作，例如瀏覽器檢測(cè)，處理ready事件等 ... */ //最后返回jQuery供外部使用(作為全局對(duì)象） return?jQuery; })();

可以看出jQuery大致分為兩個(gè)部分，一個(gè)是靜態(tài)方法部分，一個(gè)是實(shí)例對(duì)象部分，而這兩者都是通過(guò)同一個(gè)函數(shù)extend來(lái)進(jìn)行擴(kuò)展的，也許上面代碼看起來(lái)還比較抽象，下圖則描述了整個(gè)框架的關(guān)系：

這樣整個(gè)結(jié)構(gòu)就顯得清晰多了。其中最右邊的jQuery實(shí)例是通過(guò)new jQuery.fn.init得到的。這樣，擴(kuò)展到j(luò)Query.fn上的方法即可以作為實(shí)例方法供jQuery實(shí)例訪問(wèn)，而擴(kuò)展到j(luò)Query對(duì)象本身上的方法則作為靜態(tài)方法。

在core.js中調(diào)用了extend來(lái)擴(kuò)展絕大部分核心方法，首先來(lái)分析一下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] || {}, //將第一個(gè)參數(shù)作為擴(kuò)展的目標(biāo)對(duì)象 ????????i = 1, ????????length = arguments.length, ????????deep = false; ????// Handle a deep copy situation ????//可以傳遞一個(gè)bool值進(jìn)來(lái)用于表示擴(kuò)展對(duì)象時(shí)是否是深拷貝 ????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) ????// 當(dāng)擴(kuò)展對(duì)象是字符串時(shí) ????if?( typeof?target !== "object"?&& !jQuery.isFunction(target) ) { ????????target = {}; ????} ????// extend jQuery itself if only one argument is passed ????if?( length === i ) { ????// 關(guān)鍵！!當(dāng)調(diào)用$.extend時(shí)，this將綁定到j(luò)Query對(duì)象上，此時(shí)擴(kuò)展的方法或者屬性將是靜態(tài)的， ????// 而調(diào)用$.fn.extend時(shí)則綁定到j(luò)Query.fn上，此時(shí)擴(kuò)展的均是實(shí)例方法，我們?cè)谧珜懖寮r(shí)可以在方法內(nèi)部使用this，此時(shí)的this指向的是jQuery的實(shí)例對(duì)象 ????????target = this; ????????--i;//修正i，以便后面正確遍歷對(duì)象 ????} ????//以下便是擴(kuò)展代碼，既可以用于擴(kuò)展jQuery，也可以用來(lái)擴(kuò)展自定義的對(duì)象，此方法是公開(kāi)的，更多可以參考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 ????????????????// 如果是合并普通對(duì)象或者數(shù)組時(shí)，采用遞歸方式進(jìn)行深拷貝（比如當(dāng)數(shù)組中嵌套數(shù)組或者對(duì)象嵌套對(duì)象時(shí)） ????????????????// 在jQuery內(nèi)部核心擴(kuò)展方法時(shí)并沒(méi)有用到此段代碼，比如下面的isPlainObject，isArray方法都是用extend擴(kuò)展到j(luò)Query中的。 ????????????????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; };

轉(zhuǎn)載于:https://www.cnblogs.com/yhspehy/p/6064517.html

總結(jié)

以上是生活随笔為你收集整理的(转载)jQuery 1.6 源码学习（一）——core.js[1]之基本架构的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。