1. 程式人生 > >jQuery.extend與jQuery.fn.extend

jQuery.extend與jQuery.fn.extend

接下來詳細介紹它的實現

jQuery.extend = jQuery.fn.extend = function() {
	var options, name, src, copy, copyIsArray, clone,
		target = arguments[ 0 ] || {},
		i = 1,
		length = arguments.length,   
		deep = false;         //預設是無需深度遍歷

	if ( typeof target === "boolean" ) { //判斷第一引數是否為boolean,表示是否要深度遍歷
		deep = target;

		target = arguments[ i ] || {};
		i++;
	}

	if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {  //遍歷的物件必須為object或者function
		target = {};
	}

	if ( i === length ) {           //判斷是否是自身擴充套件,自身擴充套件就是所有遍歷的方法屬性都新增到$.fn,不是自身擴充套件的時候所有
		target = this;                     //的物件都擴充套件到第一個非boolean的引數中(結合上面的連結理解起來更輕鬆)
		i--;
	}

	for ( ; i < length; i++ ) {  //遍歷傳入的所有引數,進行相應的物件擴充套件

	
		if ( ( options = arguments[ i ] ) != null ) {
                         //遍歷一個引數的所有屬性、方法,非深度擴充套件時直接覆蓋前面物件,深度擴充套件時遞迴進入物件裡面以
                         //基本型別資料覆蓋前面資料
			for ( name in options ) 
			{  
				src = target[ name ];
				copy = options[ name ];
				if ( target === copy ) {  //防止無限迴圈
					continue;
				}
				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
					( copyIsArray = Array.isArray( copy ) ) ) ) {

					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && Array.isArray( src ) ? src : [];

					} else {
						clone = src && jQuery.isPlainObject( src ) ? src : {};
					}

			
					target[ name ] = jQuery.extend( deep, clone, copy ); //遞迴的方式深度遍歷物件、陣列
				} else if ( copy !== undefined ) { // 無需深度擴充套件或者已經是基本型別資料,就直接擴充套件
					target[ name ] = copy;
				}
			}
		}
	}
	return target;
};

			
注意:這個方法表示 jQuery.extend 與jQuery.fn.extend 指向同一個引用,而裡面的this 根據呼叫者改變,指向jQuery.extend 或者jQuery.fn

eg :  $.extend(dest,src1,src2,src3...);  把src1後面的物件全部擴充套件到dest裡面,修改了dest原物件,最後返回的是擴充套件之後的dest

eg:$.extend({},src1,src2,src3...)   新增一個空物件,所有引數擴充套件到{} 裡面,保留了原物件

eg:  $.fn.extend({src1,src2..})  把src1...擴充套件到$.fn裡面,而$.fn.init.prototype = $.fn,這樣就擴充套件了$例項化方法

PS: 

     1、當我們需要擴充套件$()例項化方法的時候就需要用到   $.fn.extend, 所有的jquery外掛都是通過這個入口擴充套件它的例項方法

     2、$.extend({})表示擴充套件的方法新增到$中,通過 ' $. ' 引用, $.fn.extend({}),擴充套件到$.fn裡面,通過 '$("節點").'  引用