如何正確閱讀jquery源碼和jquery插件源碼？

我剛好這個月在看jquery源碼，目前看了差不多多半了吧；剛開始的時候，看起來確實很喫力，在這，我推薦你可以在百度去搜索jquey源碼，裡面有很多詳細說明jquery源碼的博客系列文章，找一個完整版本，跟隨他們一起，慢慢去看，不要心急，也不要被最開始的困難而嚇倒，只要你慢慢去看，後面會越來越順利，而且你會學到很多以前不知道或者很少想到的東西；

上面囉嗦了幾句，在這，先解決樓主問題；如何才能更快的定位函數的實現代碼；要解決這個問題，首先必須明白jquery對象api的函數其實分為兩大類，第一類是全局方法，如「$.ajax」、"$.data"、"$.Callbacks"、「$.attr」等；第二類是元素對象上的方法，如"$("#test").attr"、"$("#test").find"；而且由上可以發現，可能兩類中有相同方法名的方法，如上面的「$.attr」與"$("#test").attr"，如果通過去查找attr的方法，不一定能夠精確定位到；

其實仔細看源碼可以發現，所有全局方法都是通過「jQuery.extend({ })」的方式綁定上去的；如"$.ajax"則通過下圖方式添加的

而第二類元素對象上的方法則通過「jQuery.fn.extend({ })」的方式添加到元素上以供調用的，如下圖；

所以，如果你需要很快的定位一個api方法的源碼位置，你可以直接通過在源碼中搜索需要搜索的方法名，如「attr:」，然後根據是「jQuery.fn.extend」還是「jQuery.extend」去確定是全局的方法還是元素上的方法，就可以精確定位源碼位置；

還有一種方式，去github上面，克隆下jquery源碼，在其src文件夾裡面，有每個大功能對應的文件夾及js代碼，這樣你就可以通過分析方法屬於哪類裡面的方法，然後去找對應文件代碼即可，如下圖，如果需要找「$.attr」方法，則只需要看「attributes」文件夾，裡面有attr.js；然後在js代碼裡面，根據上面說的方法（根據是「jQuery.fn.extend」還是「jQuery.extend」），去區分到底是全局的attr方法還是元素上面的attr方法的源代碼即可；