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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。