jQuery源碼解讀:部份jQuery工具方法實現

jopen 9年前發布 | 16K 次閱讀 jQuery Ajax框架

jQuery作為前端最流行的類庫,沒有之一,源碼必須得讀一讀。 如果解讀不正確的地方,還請同學們在評論中指正。 本文章基于jquery-1.9.1.js。(編者注:雖然JQ已經出到2.X,本文所述的方法是基本方法,沒有版本之差,對于學習有所幫助)。


一、$.type() 判斷js數據類型

用法:$.type(new Array()); //array


部份源碼(截取關鍵部份,請忽略源碼語法):


jQuery源碼解讀:部份jQuery工具方法實現


解讀:


1、class2type生成后的內容為

jQuery源碼解讀:部份jQuery工具方法實現


2、core_toString使用的是對象實例的toString

所有繼隨自Object的對象都有 toString方法,為什么一定要使用object.toString,因為array,function雖然有toString方法,但該方法進行了 重寫,array調用toString打印的數組成員用逗號隔開的字符串。這里使用的是{}.toString.call(obj);改變 toString的this指向為object實例。jquery為什么使用的是class2type.toString.call,這樣就可以少聲明一 個object。


jQuery源碼解讀:部份jQuery工具方法實現



這樣就得到class2type的鍵名,以此判斷數據類型。


二、$.each() 遍歷一個數組或對象。

each()其實還是使用的for來進行循環的,除了方便外,因其做了一下簡單的封裝,所以效率還是要比for差,對于大型循環,盡量使用for.


三、$.trim() 去除字符串兩端的空格。

jQuery源碼解讀:部份jQuery工具方法實現


該方法需要解釋的是,“\uFEFF”和“\xA0”。


某些軟件,在保存一個以UTF-8編碼的文件時,會在文件開始的地方插入三個不可見的字符(0xEF 0xBB 0xBF,即BOM),轉碼后是“\uFEFF”,因此我們在讀取時需要自己去掉這些字符。


“\xA0”其實就是HTML中常見的“ ”


四、$.isNumeric() 判斷是否是數字

jQuery源碼解讀:部份jQuery工具方法實現

isFinite() 函數用于檢查其參數是否是無窮大。如果 number 是有限數字(或可轉換為有限數字),那么返回 true。否則,如果 number 是 NaN(非數字),或者是正、負無窮大的數,則返回 false。


五、$.isEmptyObject() 判斷對象是否為空

jQuery源碼解讀:部份jQuery工具方法實現


這個方法很好懂,就不多解釋


六、$.parseJSON() 將JSON字符串轉換為JSON對象

jQuery源碼解讀:部份jQuery工具方法實現 jQuery源碼解讀:部份jQuery工具方法實現


這個方法主要是看上面幾個正則表達式,從字符串轉JSON對象,僅僅是使用return ( new Function( “return ” + data ) )();


七、$.globalEval() 在全局作用域執行一段JS腳本


jQuery源碼解讀:部份jQuery工具方法實現

Query該方法源于:Jim Driscoll


方法原理:eval作用域問題


jQuery源碼解讀:部份jQuery工具方法實現

 

原文:http://segmentfault.com/blog/news/1190000002450582

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!