猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!
https://risingstars.js.org/2019/en
大家好,我是你們的 貓哥,那個(gè)不喜歡吃魚、又不喜歡喵 的超級(jí)貓 ~
關(guān)于貓哥,大家可以看看我的年終總結(jié) 前端工程師的 2020 年終總結(jié) - 乾坤未定,你我皆黑馬。
今天給大家推薦 2020 年增長數(shù)最多的 10 大頂級(jí)前端學(xué)習(xí)資源項(xiàng)目!
看完這 10 大頂級(jí)項(xiàng)目,你會(huì)發(fā)現(xiàn)原來 GitHub 上也有這么多的 JavaScript 學(xué)習(xí)資源!
1. javascript-algorithms
2020 年增長 31.9K
該倉庫包含了多種基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)。
每種算法和數(shù)據(jù)結(jié)構(gòu)都有自己的 README,包含相關(guān)說明和鏈接,以便進(jìn)一步閱讀 (還有 YouTube 視頻) 。
數(shù)據(jù)結(jié)構(gòu)包含了 鏈表、雙向鏈表、隊(duì)列、棧、哈希表(散列)、堆、優(yōu)先隊(duì)列、字典樹、樹、優(yōu)先隊(duì)列、二叉查找樹、AVL 樹、紅黑樹、線段樹、樹狀數(shù)組、圖、并查集、布隆過濾器
算法包含了 算法主題 和 算法范式。
其中算法主題又包含了:數(shù)學(xué)、集合、字符串、搜索、排序、鏈表、樹、圖、加密、機(jī)器學(xué)習(xí)。
算法范式:算法范式是一種通用方法,基于一類算法的設(shè)計(jì)。這是比算法更高的抽象,就像算法是比計(jì)算機(jī)程序更高的抽象。
算法范式包含了:BF 算法、貪心法、分治法、動(dòng)態(tài)編程、回溯法、Branch & Bound 等等。
這項(xiàng)目還出了對(duì)應(yīng)的教學(xué)視頻,總共 81 個(gè)視頻講解,每個(gè)視頻大概 5 - 10分鐘左右,還能學(xué)習(xí)英語哦 ????
youtube 的教學(xué)視頻:https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8
貓哥之前學(xué)習(xí)算法的時(shí)候,也在這個(gè)項(xiàng)目中收益良多呢!
而且這個(gè)項(xiàng)目還一直有維護(hù)和更新內(nèi)容哦!真的非常不錯(cuò)的一個(gè)項(xiàng)目!
https://github.com/trekhleb/javascript-algorithms
2. nodebestpractices
2020 年增長 20.2K
Node.js 最佳實(shí)踐。
這個(gè)項(xiàng)目是對(duì) Node.js 最佳實(shí)踐中排名最高的內(nèi)容的總結(jié)和分享。
這里是最大的匯集,且每周都在增長 - 當(dāng)前,超過 50 個(gè)最佳實(shí)現(xiàn),樣式指南,架構(gòu)建議已經(jīng)呈現(xiàn)。
目錄
項(xiàng)目結(jié)構(gòu)實(shí)踐 (5)
異常處理實(shí)踐 (11)
編碼規(guī)范實(shí)踐 (12)
測試和總體質(zhì)量實(shí)踐 (8)
進(jìn)入生產(chǎn)實(shí)踐 (16)
新: 安全實(shí)踐(23)
Performance Practices (coming soon)
比如 錯(cuò)誤處理最佳實(shí)踐 中 使用 Async-Await 和 promises 用于異步錯(cuò)誤處理
TL;DR: 使用回調(diào)的方式處理異步錯(cuò)誤可能是導(dǎo)致災(zāi)難的最快的方式(a.k.a the pyramid of doom)。對(duì)您的代碼來說,最好的禮物就是使用規(guī)范的 promise 庫或 async-await 來替代,這會(huì)使其像 try-catch 一樣更加簡潔,具有熟悉的代碼結(jié)構(gòu)。
否則: Node.js 回調(diào)特性, function(err, response), 是導(dǎo)致不可維護(hù)代碼的一個(gè)必然的方式。究其原因,是由于混合了隨意的錯(cuò)誤處理代碼,臃腫的內(nèi)嵌,蹩腳的代碼模式。
https://github.com/goldbergyoni/nodebestpractices
3. You-Dont-Know-JS
2020 年增長 18K
該項(xiàng)目為 YDNJS(You Don’t Know JS) 圖書系列,包含一系列深入探討 JavaScript 語言核心機(jī)制的書籍。
內(nèi)容大綱
入門與進(jìn)階
作用域與閉包
this 與對(duì)象原型
類型與文法
異步與性能
ES6 與未來
https://github.com/getify/You-Dont-Know-JS
4. clean-code-javascript
2020 年增長 15.1K
優(yōu)秀的 JS 代碼規(guī)范。
比如:對(duì)相同類型的變量使用相同的關(guān)鍵字
Bad:
getUserInfo();? getClientData();? getCustomerRecord();Good:
getUser();再比如:使用可搜索的命名
在開發(fā)過程中,我們閱讀代碼的時(shí)間會(huì)遠(yuǎn)遠(yuǎn)超過編寫代碼的時(shí)間,因此保證代碼的可讀性與可搜索會(huì)非常重要。
切記,沒事不要坑自己。
Bad:
//525600到底啥意思? for?(var?i?=?0;?i?<?525600;?i++)?{runCronJob(); }Good:
//?聲明為全局變量 var?MINUTES_IN_A_YEAR?=?525600; for?(var?i?=?0;?i?<?MINUTES_IN_A_YEAR;?i++)?{runCronJob(); }https://github.com/ryanmcdermott/clean-code-javascript
5. 30-seconds-of-code
2020 年增長 13.3K
該項(xiàng)目講的是滿足你所有開發(fā)需求的簡短代碼段,里面都是些經(jīng)常會(huì)用到而且是非常經(jīng)典的代碼,非常值得學(xué)習(xí)!
比如 JavaScript 模塊就分為了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便學(xué)習(xí)的。
比如:你必須知道的 4 種 JavaScript 數(shù)組方法
Array.prototype.map()
const?arr?=?[1,?2,?3]; const?double?=?x?=>?x?*?2; arr.map(double);?//?[2,?4,?6]Array.prototype.filter()
const?arr?=?[1,?2,?3]; const?isOdd?=?x?=>?x?%?2?===?1; arr.filter(isOdd);?//?[1,?3]Array.prototype.reduce()
const?arr?=?[1,?2,?3];const?sum?=?(x,?y)?=>?x?+?y; arr.reduce(sum,?0);?//?6const?increment?=?(x,?y)?=>?[...x,?x[x.length?-?1]?+?y]; arr.reduce(increment,?[0]);?//?[0,?1,?3,?6]Array.prototype.find()
const?arr?=?[1,?2,?3]; const?isOdd?=?x?=>?x?%?2?===?1; arr.find(isOdd);?//?1又比如:如何在 JavaScript 中實(shí)現(xiàn)睡眠功能?
同步版本
const?sleepSync?=?(ms)?=>?{const?end?=?new?Date().getTime()?+?ms;while?(new?Date().getTime()?<?end)?{?/*?do?nothing?*/?} }const?printNums?=?()?=>?{console.log(1);sleepSync(500);console.log(2);console.log(3); };printNums();?//?Logs:?1,?2,?3?(2?and?3?log?after?500ms)異步版本
const?sleep?=?(ms)?=>new?Promise(resolve?=>?setTimeout(resolve,?ms));const?printNums?=?async()?=>?{console.log(1);await?sleep(500);console.log(2);console.log(3); };printNums();?//?Logs:?1,?2,?3?(2?and?3?log?after?500ms)其實(shí)上面講到的事例里面還提供 api 和方法的講解的,方便讀者能看懂的,這里就不寫出來了。
還想學(xué)更多的 經(jīng)典 js 代碼片段,請(qǐng)看下面的倉庫
https://github.com/30-seconds/30-seconds-of-code
6. javascript
2020 年增長 11.8K
這個(gè)項(xiàng)目是 JavaScript 編程風(fēng)格指南。
包含了:類型、對(duì)象、數(shù)組、字符串、函數(shù)、屬性、變量、提升、比較運(yùn)算符 & 等號(hào)、塊、注釋、空白、逗號(hào)、分號(hào)、類型轉(zhuǎn)化、命名規(guī)則、存取器、構(gòu)造函數(shù)、事件、模塊、jQuery、ECMAScript 5 兼容性、測試、性能、資源、JavaScript 風(fēng)格指南說明
https://github.com/airbnb/javascript
7. tech-interview-handbook
2020 年增長 10.6K
技術(shù)人員求職面試,單刷leetcode上的大廠題庫可能還不夠。
簡歷怎么寫才能吸引HR的眼光,可能會(huì)被技術(shù)老大問到哪些常見問題,拿到Offer之后怎樣才能讓自己的優(yōu)勢最大化然后優(yōu)中選優(yōu)?
面對(duì)這些赤果果的問題,目前就職于Facebook的新加坡小哥Yangshun Tay就整理了一份干貨。
面試全流程需要注意的事項(xiàng)都在里面了,包含從簡歷準(zhǔn)備、面經(jīng)和談判全過程,教你如何避雷不踩坑。
精心策劃的內(nèi)容可幫助您獲得下一次技術(shù)面試的機(jī)會(huì),重點(diǎn)是算法。
除了常見的算法問題外,其他出色的功能還包括:
如何準(zhǔn)備編碼面試
面試備忘單-直截了當(dāng)?shù)淖⒁馐马?xiàng)
按主題分類的算法技巧和最佳實(shí)踐問題
“前端面試問題”答案
頂尖科技公司的面試形式
頂尖科技公司提出的行為問題
在面試結(jié)束時(shí)問您的面試官的好問題
有用的簡歷提示,以使您的簡歷受到關(guān)注以及注意事項(xiàng)
https://github.com/yangshun/tech-interview-handbook
8. freeCodeCamp
2020 年增長 10.4K
FreeCodeCamp 是一個(gè)自由開源的學(xué)習(xí)編程的社區(qū),致力于幫助人們利用零散時(shí)間學(xué)習(xí)編程。
它的使命是 Learn to code and help nonprofits(學(xué)習(xí)編程,去幫助那些非盈利組織)。
FCC 涵蓋 HTML5、CSS、React、JavaScript、Database 等課程,游戲化程度非常高,學(xué)員可以通過線上聊天室和線下社區(qū)活動(dòng)(Coffee and Code)相互幫助。
目前覆蓋全球 160+ 個(gè)國家、1000+ 個(gè)城市,40W+ 開發(fā)者在平臺(tái)學(xué)習(xí)。
https://github.com/freeCodeCamp/freeCodeCamp
9. Front-End-Checklist
2020 年增長 9.2K
該項(xiàng)目是詳盡的關(guān)于前端開發(fā)的清單,它列出了將 HTML 頁面投入生產(chǎn)之前需要進(jìn)行測試的所有元素。
它基于眾多前端開發(fā)人員的多年經(jīng)驗(yàn),其中一部分整合自其他的開源清單。
內(nèi)容包含:
Head
HTML
Webfonts
CSS
Images
JavaScript
Security
Performance
Accessibility
SEO
https://github.com/thedaviddias/Front-End-Checklist
10. vanillawebprojects
2020 年增長 8.2K
新手上路最開始用的就是基礎(chǔ)的 HTML+CSS+JS 三件套,而在框架和庫越來越多的現(xiàn)在,更多的時(shí)候使用它們來提高效率是常見的選擇。
這個(gè)項(xiàng)目則是反過來,是使用老三件套實(shí)現(xiàn)的一些小項(xiàng)目合集,不管是為了更好理解框架,還是為了驗(yàn)證一下自己的知識(shí)水平,重新操刀老三件套都不失為一個(gè)好選擇,要知道不管是什么框架和庫,基礎(chǔ)都是由這三板斧搭建起來的。
https://github.com/bradtraversy/vanillawebprojects
最后
不知不覺,原創(chuàng)文章已經(jīng)寫到第 33 期了呢,幾乎每一篇都是貓哥精心挑選的優(yōu)質(zhì)開源項(xiàng)目,推送的每一篇文章里面的項(xiàng)目幾乎都是對(duì)前端開發(fā)很有幫助的。
原創(chuàng)不易,一篇優(yōu)質(zhì)的文章都是要肝幾個(gè)晚上才能肝出來的,花費(fèi)很多時(shí)間、精力去篩選和寫推薦理由,大佬們看完文章后順手點(diǎn)個(gè)贊或者轉(zhuǎn)發(fā)吧,給貓哥一點(diǎn)鼓勵(lì)吧。
往期精文請(qǐng)看下方寶藏倉庫,請(qǐng)慎入!
https://github.com/FrontEndGitHub/FrontEndGitHub
微信搜 “前端GitHub”,回復(fù) “電子書” 即可以獲得上面 160 本前端精華書籍哦,貓哥 WX:CB834301747 。
平時(shí)如何發(fā)現(xiàn)好的開源項(xiàng)目,可以看看這篇文章:GitHub 上能挖礦的神仙技巧 - 如何發(fā)現(xiàn)優(yōu)秀開源項(xiàng)目
往期精文
推薦 7 個(gè) Vue2、Vue3 源碼解密分析的開源項(xiàng)目
Vue3 的學(xué)習(xí)教程匯總、源碼解釋項(xiàng)目、支持的 UI 組件庫、優(yōu)質(zhì)實(shí)戰(zhàn)項(xiàng)目
GitHub 2W 星:一鍵生成前后端代碼
程序員必備的 10 大 GitHub 倉庫,前端占了 7 個(gè)!
原創(chuàng)不易,老板點(diǎn)個(gè)贊吧
總結(jié)
以上是生活随笔為你收集整理的猛增 110K Star!年增长数最多的 10 大顶级前端学习资源项目!的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 推荐 7 个 Vue2、Vue3 源码解
- 下一篇: 前端趋势榜:上周最热门的 10 大前端项