jquery是如何定義的，如何調(diào)用的，如何擴(kuò)展的。掌握核心方法是如何實(shí)現(xiàn)的，是理解jQuery源碼的關(guān)鍵。這里理解了一切豁然開(kāi)朗。

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對(duì)象僅僅是構(gòu)造函數(shù)jQuery.prototype.init加強(qiáng)版

}

2，jQuery的原型，及與jQuery.fn.init的關(guān)系

//定義對(duì)象方法，也即只有通過(guò)$(“xx”).的方式才能調(diào)用。

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，是為了后面的實(shí)例化

// Give the init function the jQuery prototype for later instantiation

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

也即是，$(“xx”)擁有了實(shí)例方法，可以調(diào)用。（調(diào)用jQuery.prototype下定義的方法）

為什么jQuery要返回jQuery.fn.init對(duì)象?

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 上找到類似問(wèn)題：

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

還有這個(gè)

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 former I believe is 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.

3，extend擴(kuò)展對(duì)象方法和靜態(tài)方法原理

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

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

return target;

}

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

再通過(guò)this作用域看一下：

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

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

附extend實(shí)現(xiàn)細(xì)節(jié)：

使用場(chǎng)景：

1，擴(kuò)展一些函數(shù)

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

2，合并多個(gè)對(duì)象到第一個(gè)對(duì)象

（1）淺copy，第一個(gè)參數(shù)是目標(biāo)對(duì)象。例如

var a = {name:”hello”}

var b = {age:30}

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

（2）深copy，第一個(gè)參數(shù)是TRUE，第二個(gè)參數(shù)是目標(biāo)對(duì)象。例如

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;

 // 是不是深復(fù)制 Handle a deep copy situation
 if ( typeof target === "boolean" ) {
 deep = target;
 target = arguments[1] || {};
 // skip the boolean and the target
 i = 2;
 }

 // 不是對(duì)象類型 Handle case when target is a string or something (possible in deep copy)
 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
 target = {};
 }

 // 擴(kuò)展插件的情況 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 < length; i++ ) {//可能有多個(gè)對(duì)象擴(kuò)展到第一個(gè)對(duì)象上
 // Only deal with non-null/undefined values
 if ( (options = arguments[ i ]) != null ) {//options是一個(gè)對(duì)象
 // Extend the base object
 for ( name in options ) {
 src = target[ name ]; //src是target里已經(jīng)存在的value（也可能不存在）
 copy = options[ name ];//copy是待合入的一個(gè)value

 // 防止循環(huán)引用 Prevent never-ending loop
 if ( target === copy ) {//例如：var a={};$.extend(a,{name:a});//可能導(dǎo)致循環(huán)引用
 continue;
 }

 // if是深復(fù)制else是淺復(fù)制 Recurse if we're merging plain objects or arrays
 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 : {};
 }

 // 亮了，直至剝離至最深一層非對(duì)象類型，而且是逐個(gè)。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;//target[ name ] = options[ name ];
 }
 }
 }
 }

 // Return the modified object
 return target;
};

jQuery.extend({…})分析

看一下是如何寫(xiě)的

jQuery.extend({

prop:””

method:function(){}

});

可以看出，這些方法是jQuery的靜態(tài)屬性和方法（也即是工具方法），將來(lái)既可以直接提供給用戶使用，也可以在內(nèi)部使用。

具體實(shí)現(xiàn)的工具屬性和方法有（同時(shí)也標(biāo)注了哪些在內(nèi)部使用）

jQuery.extend({

expando : 生成唯一JQ字符串(內(nèi)部)

noConflict() : 防止沖突

isReady : DOM是否加載完(內(nèi)部)

readyWait : 等待多少文件的計(jì)數(shù)器(內(nèi)部)

holdReady() : 推遲DOM觸發(fā)

ready() : 準(zhǔn)備DOM觸發(fā)

isFunction() : 是否為函數(shù)

isArray() : 是否為數(shù)組

isWindow() : 是否為window

isNumeric() : 是否為數(shù)字

type() : 判斷數(shù)據(jù)類型

isPlainObject() : 是否為對(duì)象自變量

isEmptyObject() : 是否為空的對(duì)象

error() : 拋出異常

parseHTML() : 解析節(jié)點(diǎn)

parseJSON() : 解析JSON

parseXML() : 解析XML

noop() : 空函數(shù)

globalEval() : 全局解析JS

camelCase() : 轉(zhuǎn)駝峰

nodeName() : 是否為指定節(jié)點(diǎn)名(內(nèi)部)

each() : 遍歷集合

trim() : 去前后空格

makeArray() : 類數(shù)組轉(zhuǎn)真數(shù)組

inArray() : 數(shù)組版indexOf

merge() : 合并數(shù)組

grep() : 過(guò)濾新數(shù)組

map() : 映射新數(shù)組

guid : 唯一標(biāo)識(shí)符(內(nèi)部)

proxy() : 改this指向

access() : 多功能值操作(內(nèi)部)

now() : 當(dāng)前時(shí)間

swap() : CSS交換(內(nèi)部)

});

jQuery.ready.promise = function(){}; 監(jiān)測(cè)DOM的異步操作(內(nèi)部)

function isArraylike(){} 類似數(shù)組的判斷(內(nèi)部)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com