前端入門資源分享
本文已使用維權騎士進行維權,轉載請私,維權必究!
- 最近有收到很多私信,希望分享一些前端學習經驗。個人雖然在秋招時收割了一大批大廠offer,但是技術路慢慢,吾將上下而求索,這裡給大家分享一些個人前端學習用到的一些資源,看者取其精華去其糟粕即可。本文會一直持續更新。
- 本文藍色字型是對應軟體或知識連結,連結都指向相應的官網或一些很精華的知識分享網址,儘可能連結到大家可訪問的國內映象或中文版,絕對無廣告連結。
- 更多資源建議在歡迎評論區討論
我是目錄
- 編輯器與瀏覽器
1.1 編輯器
1.2 瀏覽器 - 高能連結
2.1 學習網址
2.2 三大前端框架
2.3 常用JS與Node庫
2.4 UI庫
2.5 潮流前端
2.6 工具
2.7 社群
2.8 學習網站
2.9 部落格 and 文章 - 學習書籍
1. 編輯器與瀏覽器
1.1 編輯器
ofollow,noindex">VSCode (也可以用 Sublime 或 Webstore ) - 個人使用的VC,因為開源的VC有很多開源的外掛,這款外掛豐富的編輯器簡直就是為前端工程師們量身定製,據說它本身就是一款藉助前端庫 electronjs 構建的桌面應用。
1.2 瀏覽器
Chrome瀏覽器 - 除錯前端程式碼的神器,Chrome的開發人員控制檯(按F12召喚),可以除錯佈局,可以console檢視bug和打斷點,可以檢視網路資源和網路載入,可以檢視渲染機制,還可以檢視快取等,非常之強大。對於它的變態 V8引擎 感興趣的同學可以瞭解下。
2. 高能連結
前方一大波高能到來!!!
2.1 學習網址
W3School - 一個H5+CSS3基礎入門非常好的網站,網站裡還有很好的JS基礎教程、PHP教程、網路教程,公認的入門必備網站。
MDN - 火狐打造的最全的前端百科詞典,所有前端最新規範都收錄在其中,而且還支援中文版喲,就這一個網站可以助你從入門到精通啦~
阮一峰老師的ES6入門 - 阮老師的開源入門ES6的文件可以說是非常良心的鉅作,整本書對於入門ES6非常友好,所有ES6要點知識都囊括其中。
廖雪峰老師的JS入門 - 雪峰老師的JS入門教程寫的很用心,雖然更深的知識還需要自己去MDN或買一本《JS高程》,但是快速入門JS是非常高效的。
nodeJs - 所有NodeJs的API都在這裡啦,看完它,你的NodeJs進軍中級甚至高階都沒問題啦。
2.2 三大前端框架
Angular - 三大主流前端框架之一,國外很火的一個老大哥前端框架。
react全家桶- 這款站在前端食物鏈頂端的框架,擁有龐大的生態圈,無論是PC端、移動端還是native開發,全盤通吃,各大大廠也都在使用這個框架。
react , react-router , redux , react-native
vue全家桶- 由國內尤大神主力打造的MVVM前端框架,簡單易上手,大廠很多PC業務都基於此框架。
vue , vuex , vue-router
2.3 常用JS與Node庫
JQ - 不多說,JS的簡化版與速成版,但是建議不要以為會用JQ就會前端了,還有很長很長的路要走,要想成為一個前端大佬還需要對JS有較深的涉獵才行。
Zepto - 移動端版的JQ。
Babel - 一個 JavaScript 編譯器,一般用於轉碼編譯ES6、JSX較多。
Underscore - 輕量精幹的JS庫,它提供了幾十種函數語言程式設計的方法,彌補了JQ庫的不足。
Backbone - 一個輕量級MVC框架,重度依賴 Underscore.js
,依託它我們可以像高階語言一樣定義類、類屬性及方法,更好的組織程式碼並按框架提供的資料邏輯分離方法減少程式碼混亂。
Handbar - 可以說它是一種很好的前後端分離的方案, 是 JavaScript的一個語義模板庫,通過對view和data的分離來快速構建Web模板。
Express - NodeJs的老將軍框架了,簡化封裝了NodeJs的API,提供了很多常用的Node服務。
Koa2 - NodeJs的小生將軍,由 Express 幕後的原班人馬打造,一個超輕量級的NodeJs框架。
2.4 UI庫
bootstrap - 用於開發響應式佈局、移動裝置優先的前端UI庫。
elementUI - 餓了麼開發的一款前端UI庫,簡單易上手,搭配vue使用更好。
antDesign - 螞蟻金服開發的一款前端UI庫,成熟的UI體系和高效能,搭配React使用更好。
2.5 潮流前端
less - 賦予CSS動態語言的特性。
sass - 成熟、穩定、強大的 CSS 擴充套件語言解析器。
PWA - (若此連結打不開,請掛代理或開啟下面這個)
PWA實戰 - 作為一個前端開發者,如果你還不知道PWA是什麼那麼你就真的是OUT了。PWA,面向下一代的Progressive Web APP。
Weex - 一個使用 Web 開發體驗來開發高效能原生應用的移動端框架,非常適合搭配Vue使用。
Rax - 我廠構建的一個跨容器的渲染引擎,底層依舊是Native,非常適合搭配React使用。
TypeScript - TS可以說是這兩年非常火熱的指令碼語言了,可以把它當作JavaScript的超集。它支援任意瀏覽器,任意環境,任意系統並且也是開源的。
2.6 工具
Git - github,最大的開源平臺,程式員的天堂世界,學會掌控它吧。
Webpack - 當前最火的前端打包工具。
Gulp - 最輕量級別的前端構建工具。
Grunt - 自動化的強生態前端構建工具。
hexo - 聽說你們搭建部落格都用它。
IconFont - 我廠的一個開源Icon庫,聽說你們的Icon都來自於它。
cocos2d-x - 一個做遊戲的引擎。
2.7 社群
CSDN - 國內最大的IT技術交流論壇,有很多厲害的技術部落格都出自於此。
思否 - 前端學習論壇。
掘金 - 前端學習論壇。
伯樂線上 - 前端學習論壇。
gitter - 前端技術交流gitter,有點類似QQ群,大家都在其中交流前端技術。
知乎 - 知乎上的前端交流有很多非常精細、獨到的前端技術見解,很是值得學習。
大前端 - 一個純前端技術交流社群。
2.8 學習網站
慕課網 - 課程學習網站。
網易雲課堂 - 課程學習網站。
FreeCodeCamp - 從0基礎一步一步成長的編碼學習網站, 非常建議用它學習前端。
PS:不想提菜鳥,你們都知道,老,舊,知識不全。
2.9 部落格 and 文章
以下連結均來自於個人收藏,若覺得有廣告嫌疑請略過
阮一峰 - 阮大神的官方部落格,有很多精彩的個人文章和技術文章,值得一去。
廖雪峰 - 雪峰老師的部落格是一個純技術部落格,其中Js,Git,Python都是免費而又適用的好東西呀。
技術胖 - 勝洪宇老師部落格很多視訊都是免費的,每節課都很短暫而又精妙,很適合入門和初級前端同學學習。
Jake - 一個個人認為有很多精彩的前端好文的技術部落格。
3. 學習書籍
《JavaScript高階程式設計》 作者:Nicholas- 書不在多,在於精。沒錯,這就是我們前端工程師常說的“紅寶石”書籍。這一本書是我個人 唯一推薦最好買一本的 ,因為它的JS講得實在是太好了,每一遍都會有不同的收穫。
《ES6標準入門》作者:阮一峰- 阮老師的這本ES6寶典可以說是對於入門ES6非常平滑而又舒暢,當然,上面也有開源的電子書官網。
《鋒利的Jquery》作者:單東林- 一本三天就入門JQ的書籍,雖然個人並不推薦大家現在去學習JQ了,畢竟現在前端更多的是模組化和元件化開發,但是對於快速開發批量網頁,使用JQ還是很快的,只是後期維護比較麻煩,尤其是大型專案。
《JavaScript權威指南》作者:費拉納提- 一本JS字典,講完了所有JS知識。
《HTTP權威指南》作者:David Gourley- 非前端書籍!作為前端工程師,我們做的很多工作除了頁面渲染就是效能載入,所以網路相關的知識,包括代理、閘道器、隧道,尤其是快取,都至少要懂一些。
《大型網站技術架構》作者:李智慧- 非前端書籍!為什麼會推薦一本架構書籍呢,因為讀完這本書,只會前端的你就可以站在整個技術設計角度去構思,為什麼當下會把程式設計師區分為前端、後端、安卓、IOS、資料、演算法、網路、測試等不同職位了。
《演算法導論》作者:Thomas H.Cormen- 非前端書籍!程式設計師兩大聖經之一,演算法祖師級別的書籍,其中講到的資料結構和演算法邏輯對於前端程式設計都很有用處,當然對於將來入門後臺也很有用的啦。
《深入理解計算機系統》作者:蘭德爾- 非前端書籍!程式設計師兩大聖經之一,系統祖師級別的書籍,這本書跟前端的關係不那麼緊密,對於系統知識,前端只需要瞭解下瀏覽器程序執行緒包括GPU、CPU就OK啦,但是作為程式設計師,尤其是作為大前端一員將來進軍後端,那麼閱讀這本書就非常有必要啦。
還是那句話,書不在多,在精。
以上,歡迎大家在評論區進行補充,如果覺得對你有用, 順手點個贊收個藏加個關注唄 ,謝謝啦~

點贊