時至今日 (2015-10-20),看jQuery源碼還有必要嗎?

入前端兩個多月了,基本知識也都學的差不多。新技術新框架還是一個接一個的冒出來,我不知道該從哪下手。ES5、ES6也都出爐了,我也不知道該不該研究。只是了解一下就可以了么?還是應該怎麼辦。。。

那現在的前端框架有什麼推薦學習的嗎?(學過之後能用的,不是學完就過時的。。。)

以上,求解惑。


現在這個時間點,想學了立刻能用並且幾年不怕過時的,可以學Vue

如果想看源碼,jq源碼仍然可以看,任何一個比較流行的東西,看了源碼都能有收穫的,但我不知道你之前是只有前端經驗,還是從別的領域轉過來,如果廣義上的編程經驗有1-2年以上,可以找個這類東西看,如果只有2個月的話,現在看還是有些不好,可能投入大,見效慢。

通常推薦看的東西有:

underscore

backbone

最近我想了想,immutable的源碼也是比較有意思的


個人不建議,因為太多了- -"

而且其中有太多因為兼容邊角case和性能問題而加入的無節操代碼。除非你遇到了很費解的BUG,認為這個BUG可能是jQuery的,或者你用錯jQuery的,可以用源碼分析一下錯在哪兒了。

如果我們像遊戲主機那樣分類JS框架,jQuery叫「本世代」的,Angular、React、Vue這類叫「次世代的」你會發現次世代的JS框架不把DOM操作暴露給用戶了,但它們內部依然有。也就是說除非你想造輪子,不然你並不需要像jQuery那樣把DOM操作玩得天花亂墜。

如果你真對DOM操作庫感興趣,我覺得不妨看看Zepto,一方面是因為它在移動端應用還算比較廣泛,一方面是因為不像jQuery那樣喪心病狂的兼容性,它代碼要簡單很多。單說代碼量的話,基本上相當於5年前的jQuery吧。然後因為Zepto里用的基本上都是現代瀏覽器特性,日後如果想自己造次世代輪子,這些也用得上。反觀jQuery那些老中醫祖傳技巧,以後說一句不兼容老瀏覽器,就只能留著當談資了……


新手不建議看代碼實現細節,因為很多晦澀難懂的代碼,如果不藉助講解文章很難看懂。

建議把jQuery的源代碼download到本地,把它的工程化流程都跑一遍,包括單元測試,搞清楚倉庫里每一個文件的作用,還能學到前端工程化的東西,然後看看代碼結構和規範就行了,以後碰到問題或者興趣來了的時候再去看代碼細節。

另外也推薦一下Vue.js,代碼覆蓋率100%,單元測試和自動化界面測試做得都不錯,比看jQuery應該能學到更多東西,代碼下到本地來跑一遍會有不少收穫。


繼續把時間浪費在躊躇,自以為是的「必要性」探討之中吧;如果你提問的時候看了,哪怕一行沒懂,也比提這個問題有價值。如果你看了,這問題有何意義;如果你不看,那連個印象也沒有,比盲目地看還差得好遠。


不打算寫一套 jQuery 這麼複雜的庫,就不用看源碼。

「入前端兩個多月了,基本知識也都學的差不多」 不是學的差不多,是都見過吧。

多寫代碼,多抄頁面,多模仿,多創造。


平時沒必要看,編碼學習的話,Backbone、underscore這些都非常適合學習。

當遇到瀏覽器兼容問題的時候,可以去看看jQuery,尤其是DOM操作類型的,說不定就有解決方案,說不定還有完整的issue單,讓你可以追溯jQuery的開發者是如何處理這種兼容問題的


曾經花了幾個月時間看完了jQuery1.6源碼,談談關於jQuery源碼:

- sizzle:選擇器引擎,主要功能就是實現高版本瀏覽器裡面的querySelectorAll這個API,同時為了頁面性能,做了很多優化:a.大部分選擇器從右到左處理; b.最左邊存在id選擇器,先求出來作為執行上下文,加快查找速度;c.ID、class、tag的使用順序等等。這部分的內容佔了30%的代碼量,其中做了很多兼容性的工作。關於性能優化的思路可以借鑒,但是兼容性就算了,兼容性是項目經驗的函數,沒必要花費太多精力,尤其是js的兼容性

- cache:數據存儲,jQuery裡面的事件、動畫、data最終都是將數據存儲在這裡面,方便數據的存儲,在一定程度上避免了內存泄露

- 事件:為了方便地定義自定義事件、模擬事件代理、觸發函數等功能,jQuery中所有的事件均是通過handle進行註冊,然後通過dispatch方法進行分發,裡面的回調函數是存儲在$.cache裡面。

- Deferred:用於非同步處理,代碼雖短,但是技巧性太強、晦澀難懂,並且是不遵循promise/A+規範的(新版本的jQuery已經遵循)

- ajax請求:對ajax請求進行了很多封裝、拓展,同時與Deferred結合在一起完成非同步操作,參數太多,很多代碼均是在做參數處理,閱讀起來沒多大收穫

- 動畫解析:這部分是jQuery的另外一個亮點吧,畢竟DOM操作是jQuery的主打特色,動畫參數涉及到起始狀態、變化時間、變化速率函數等內容,代碼不是很好閱讀

總結:上述是jQuery的主要功能模塊,總體來說jQuery代碼晦澀、技巧性強,不適合新人閱讀。隨著前端技術的發展,jQuery、YUI等框架已經不適應業務發展,歷史壽命即將完成。其中的很多設計思路也不是目前的痛點,裡面的技巧性東西學了也沒什麼意思。


贊同魯小夫的答案。

最簡單的例子:.toArray()這個函數,你讀jQuery源碼可以知道它是用了slice.call,然後你就能夠了解這個方法同樣適用於其它類數組的對象;但是如果你對js的Array和call足夠了解,很容易就知道這個函數就是這樣實現的。

所以說與其閱讀jQuery源碼不如關心更基本的東西,讀jQuery源碼的話可以說有點費力不討好了,除非你自己想要造輪子,jQuery源碼還是很值得借鑒的。


當然有必要看,可以學到很多js的寫法,對兼容性的解決是一方面,看過後發現jq還是比想像中的寫的精妙很多的。不過要看你什麼時候去看了,這點贊同前面答案,當你發現自己構思一個jq時有些力不從心時,這是看看對提升有很大幫助


願意看就看,看看怎麼解決瀏覽器兼容,遇到問題跟進去看看;不願意看可以不看,看看js標準,看看為毛它要這樣執行我覺得才會更有意思


除非你明確地想從jQuery源碼中得到點什麼,否則沒必要去看。

對於新手來說,看源碼不如看API,看API不如學語法,不要倒著來。

只有哪天你學無可學了,或者你對某個jQuery API感興趣了,或者想發明一個輪子去看看jQuery如何實現某個功能,那才去看。


我覺得是有意義的,一方面jquery作為流行至今的庫的確有一些值得學習的地方。

另一方面jquery沒有引入很多讓人摸不著頭腦的想法,僅是簡化工作上的一些體力活。如果會用且理解jquery那麼寫代碼肯定會更舒心。


不知道該從哪下手 -&> 就從你想到的地方開始下手

所以,問需要不需要看前先動手去做。

至少jquery裡面基礎處理部分是可以學習的,代碼風格很不錯的

就題主目前的情況看,jquery大概能看懂一半就不錯了 (對,當年我也干過orz)

熟練使用jquery其實也挺有用,看一遍,起碼api什麼的了解些


要知道,jQuery 的源碼不是一開始就長這樣的,而是通過很多個版本優化迭代演變成這樣的,網上可以找到 John 最初寫的 jQuery 源碼,非常簡單。

因此,現在的 jQuery 源碼中有很多為了解決各種兼容性問題以及提高性能而寫的代碼,技巧性很強,除非你已經有了一定的 JS 編程經驗,可以對各種代碼進行分辨理解並梳理出清晰的邏輯結構,否則我不太建議直接啃 JQ 源碼,容易受打擊。

其實,何必一定要看 jQuery 的源碼呢,有很多小型的框架或庫的源碼可以研究的,比如樓上幾位提到的 underscore(包括 lodash,它們非常清晰,很多函數都可以獨立出來學習),Vue, backbone等。

另外推薦支付寶的 Arale 類庫,雖然有些過時,但還是有學習價值的。還建議你經常看看 npm 上的各種模塊,對積累編程經驗也很有好處,但要注意分辨優劣。

當然,最好的學習方式還是自己造輪子。


可以告訴你,不要去閱讀,對你的打擊會非常大,我覺得倆個月除非天賦異稟,否則根本讀不下來這個框架的源碼,可能你連面向對象和設計模式這些東西都不太有體會,所以還是歇歇,然後找一個簡單點的去讀。


有,但是要找對方法,一塊一塊的看,從第一行開始看的話,只能說:『呵呵,凡人,你這是自尋死路~』


從學習的角度來看,閱讀 jQuery 的源碼還是有必要的。去了解一下框架作者的思路,對於開拓自己的思路有好處。

當然,題目中說的想學一個不過時的框架,從目前前端技術發展的速度來看,基本是沒什麼可能了。


起碼可以用來學習處理瀏覽器兼容性


有。但有些細節實在搞不懂沒必要強求。主要思路看懂,對你的幫助會很大的。總得來說,jquery難度適中,有乾貨,作為打開新世界大門的第一個js庫還是不錯的。

去年的這個時候我和題主應該是一個水平。自我感覺是個菜雞。但看過jquery以後,我就感覺我又不是我了。


jQ的選擇器確實被取代了,但是設計思想還是很值得學習的


非常建議,他的代碼風格,結構都值得學習。

你肯定不會第一次就深入細節的,慢慢來,看個大概也是好處多多


我覺得前端源碼還是容易看懂的(至少比後台容易懂一些~)。

不用特意的去看源碼,比如當你想實現某個效果,比如手風琴的時候,你自己想一下該怎麼做balalalal...然後看一下jQuery是怎麼做的。F12看他加CSS標籤上去。此時基本就明白了,再看源碼,就輕鬆很多。


推薦閱讀:

怎麼理解rxjs?
項目中如何有效率的開發js?
React中,因為非同步操作的關係,組件銷毀後調用了setState(),報警告,怎麼解決?
學習react 有哪些瓶頸需要克服?
目前react的生態系統是什麼情況,有沒有比較公認的成熟的開發技術棧?

TAG:前端開發 | JavaScript | jQuery | 前端框架 |