時至今日 (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 | 前端框架 |