回想起,剛出來工作的時候,目標很明確,要學習什么。將來要達到什么樣的高度,要跟大神們肩并肩,談天論地。朝著這個目標一直
努力著。但隨著見過的、做過的、東西越多,反而越來越迷茫-----感覺啥都會,借著度娘,工作中基本不會遇到什么問題了。
但仔細想來又啥都不會。閉著眼睛一寫,這也記不住,那也記不住(也許是年齡大的原因吧)。目標一直未變,但怎樣自己才能成為自己的偶像,卻很困惑。
獨自在前端的海洋中漂行著,摸索著,我知道一定走了很多彎路,但我也知道一直前進著。前行之中缺少一盞明燈,怎樣才能找到自己的明燈呢?
無聊之時讀了讀jQuery的源碼,希望能夠找到自己的那盞燈。
/** 1. $.extend的用法。 第一個參數是決定是否需要深復制。 由 true, false。 默認是淺復制 params: options => 接收傳遞過來的arguments 的中間參數。 name => 沒對對象的key值。 src => 當傳遞的對象key值相同到時候。要和并 copy => 復制的value 值。 copyIsArray => 判斷value對象是不是數組。 clone => 當深度復制的時候。需要新建一個變量。不會改變原始的值。 target => 最開始是默認值是取傳進來的第一個參數。過后往后一直跳。$.extend(a,b,c); target 為 a, 為b,為c。 i => 決定當前target 等于參數中的某個值 length => deep => 默認是false 是決定是否需要深復制的參數。 true 是深復制。 false 是淺復制*/jQuery.extend = jQuery.fn.extend = function() { var options, name, src, copy, copyIsArray, clone, target = arguments[ 0 ] || {}, i = 1, length = arguments.length, deep = false; // 判斷 target 來決定是否 深復制 if ( typeof target === "boolean" ) { deep = target; //當深復制的時候,需要跳過第一個參數。 來循環傳進來的參數。 剛開始 1,2,3 target = arguments[ i ] || {}; i++; } // 當 target 不是一個對象且 不是一個函數對象 這個時候就把target 變為空對象。 if ( typeof target !== "object" && !jQuery.isFunction( target ) ) { target = {}; } // 如果傳遞過來的參數只有一個的情況下。target 就是該參數。 if ( i === length ) { target = this; i--; // 把i 改為1 } for ( ; i < length; i++ ) { // 處理非空 或者 undefined 的情況。 null == null 。 undefined == null; //options 是來接收除了第一個參數外的所有參數。中間橋梁的作用吧 if ( ( options = arguments[ i ] ) != null ) { // name in options 決定了 傳過來的值必須是對象。如果不是對象的話。將要被拆分 for ( name in options ) { //這個是決定后面同級 的key 值, 后面將要覆蓋前面的。 src = target[ name ]; //獲取 key值為 name 的 value值。 copy = options[ name ]; // Prevent never-ending loop 阻止無限循環。 ???沒有搞懂,設么情況下才會出現這種情況。 if ( target === copy ) { continue; } /** 1.深復制,且value 為對象屬性的時候執行遞歸復制。 isPlainObect(copy) 判斷copy第不是一個 純對象 2.copy 時一個數組的時候。執行里面的函數。 3.(因為只有對象value 和 數組value 是需要進行深復制的。) */ 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 ); //除了對象數組,和undefined 的值。 } else if ( copy !== undefined ) { target[ name ] = copy; } } } } // Return the modified object return target; };
本段來自jquery。 version = 3.2.1 版本。 每個人的觀點必定有不一樣的地方。有錯的地方希望大家指出來。共同學習。
上面這段代碼中有個地方一直沒有想出來。
// Prevent never-ending loop 阻止無限循環。 ???沒有搞懂,設么情況下才會出現這種情況。 {} != {} 沒有想出來什么情況下才會出現target === copy的情況。 if ( target === copy ) { continue; }
目前看了大概10分之1吧,學習了很多套路。也許真的能夠找到自己的那盞明燈。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com