jQuery.extend與jQuery.fn.extend
阿新 • • 發佈:2018-12-26
接下來詳細介紹它的實現
注意:這個方法表示 jQuery.extend 與jQuery.fn.extend 指向同一個引用,而裡面的this 根據呼叫者改變,指向jQuery.extend 或者jQuery.fnjQuery.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; };
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裡面,通過 '$("節點").' 引用