我剛好這個(gè)月在看jquery源碼,目前看了差不多多半了吧;剛開(kāi)始的時(shí)候,看起來(lái)確實(shí)很吃力,在這,我推薦你可以在百度去搜索jquey源碼,里面有很多詳細(xì)說(shuō)明jquery源碼的博客系列文章,找一個(gè)完整版本,跟隨他們一起,慢慢去看,不要心急,也不要被最開(kāi)始的困難而嚇倒,只要你慢慢去看,后面會(huì)越來(lái)越順利,而且你會(huì)學(xué)到很多以前不知道或者很少想到的東西;
上面啰嗦了幾句,在這,先解決樓主問(wèn)題;如何才能更快的定位函數(shù)的實(shí)現(xiàn)代碼;要解決這個(gè)問(wèn)題,首先必須明白jquery對(duì)象api的函數(shù)其實(shí)分為兩大類,第一類是全局方法,如“$.ajax”、"$.data"、"$.Callbacks"、“$.attr”等;第二類是元素對(duì)象上的方法,如"$('#test').attr"、"$('#test').find";而且由上可以發(fā)現(xiàn),可能兩類中有相同方法名的方法,如上面的“$.attr”與"$('#test').attr",如果通過(guò)去查找attr的方法,不一定能夠精確定位到;
其實(shí)仔細(xì)看源碼可以發(fā)現(xiàn),所有全局方法都是通過(guò)“jQuery.extend({ })”的方式綁定上去的;如"$.ajax"則通過(guò)下圖方式添加的
而第二類元素對(duì)象上的方法則通過(guò)“jQuery.fn.extend({ })”的方式添加到元素上以供調(diào)用的,如下圖;
所以,如果你需要很快的定位一個(gè)api方法的源碼位置,你可以直接通過(guò)在源碼中搜索需要搜索的方法名,如“attr:”,然后根據(jù)是“jQuery.fn.extend” 還是 “jQuery.extend” 去確定是全局的方法還是元素上的方法,就可以精確定位源碼位置;
還有一種方式,去github上面源碼,克隆下jquery源碼,在其src文件夾里面,有每個(gè)大功能對(duì)應(yīng)的文件夾及js代碼,這樣你就可以通過(guò)分析方法屬于哪類里面的方法,然后去找對(duì)應(yīng)文件代碼即可,如下圖,如果需要找“$.attr”方法源碼,則只需要看“attributes”文件夾,里面有attr.js;然后在js代碼里面,根據(jù)上面說(shuō)的方法(根據(jù)是“jQuery.fn.extend” 還是 “jQuery.extend” ),去區(qū)分到底是全局的attr方法還是元素上面的attr方法的源代碼即可;
閱讀jquery源碼確實(shí)是一件比較有挑戰(zhàn)的事情,我看了下,相對(duì)比較難的是里面對(duì)元素查找部分,即sizzle方法,尤其里面使用閉包進(jìn)行函數(shù)預(yù)編譯部分;在這就不深入說(shuō)明;但是,當(dāng)你真正的閱讀完了里面的代碼后,一定會(huì)讓你收獲頗豐,希望能夠堅(jiān)持下去;