當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！

發布時間：2025/1/21 HTML 35 豆豆

生活随笔收集整理的這篇文章主要介紹了猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

https://risingstars.js.org/2019/en

大家好，我是你們的貓哥，那個不喜歡吃魚、又不喜歡喵的超級貓 ~

關于貓哥，大家可以看看我的年終總結前端工程師的 2020 年終總結 - 乾坤未定，你我皆黑馬。

今天給大家推薦 2020 年增長數最多的 10 大頂級前端學習資源項目！

看完這 10 大頂級項目，你會發現原來 GitHub 上也有這么多的 JavaScript 學習資源！

1. javascript-algorithms

2020 年增長 31.9K

該倉庫包含了多種基于 JavaScript 的算法與數據結構。

每種算法和數據結構都有自己的 README，包含相關說明和鏈接，以便進一步閱讀 (還有 YouTube 視頻) 。

數據結構包含了鏈表、雙向鏈表、隊列、棧、哈希表(散列)、堆、優先隊列、字典樹、樹、優先隊列、二叉查找樹、AVL 樹、紅黑樹、線段樹、樹狀數組、圖、并查集、布隆過濾器

算法包含了算法主題和算法范式。

其中算法主題又包含了：數學、集合、字符串、搜索、排序、鏈表、樹、圖、加密、機器學習。

算法范式：算法范式是一種通用方法，基于一類算法的設計。這是比算法更高的抽象，就像算法是比計算機程序更高的抽象。

算法范式包含了：BF 算法、貪心法、分治法、動態編程、回溯法、Branch & Bound 等等。

這項目還出了對應的教學視頻，總共 81 個視頻講解，每個視頻大概 5 - 10分鐘左右，還能學習英語哦 ????

youtube 的教學視頻：https://www.youtube.com/playlist?list=PLLXdhg_r2hKA7DPDsunoDZ-Z769jWn4R8

貓哥之前學習算法的時候，也在這個項目中收益良多呢！

而且這個項目還一直有維護和更新內容哦！真的非常不錯的一個項目！

https://github.com/trekhleb/javascript-algorithms

2. nodebestpractices

2020 年增長 20.2K

Node.js 最佳實踐。

這個項目是對 Node.js 最佳實踐中排名最高的內容的總結和分享。

這里是最大的匯集，且每周都在增長 - 當前，超過 50 個最佳實現，樣式指南，架構建議已經呈現。

項目結構實踐 (5)
異常處理實踐 (11)
編碼規范實踐 (12)
測試和總體質量實踐 (8)
進入生產實踐 (16)
新: 安全實踐(23)
Performance Practices (coming soon)

比如錯誤處理最佳實踐中使用 Async-Await 和 promises 用于異步錯誤處理

TL;DR: 使用回調的方式處理異步錯誤可能是導致災難的最快的方式(a.k.a the pyramid of doom)。對您的代碼來說，最好的禮物就是使用規范的 promise 庫或 async-await 來替代，這會使其像 try-catch 一樣更加簡潔，具有熟悉的代碼結構。

否則: Node.js 回調特性, function(err, response), 是導致不可維護代碼的一個必然的方式。究其原因，是由于混合了隨意的錯誤處理代碼，臃腫的內嵌，蹩腳的代碼模式。

https://github.com/goldbergyoni/nodebestpractices

3. You-Dont-Know-JS

2020 年增長 18K

該項目為 YDNJS(You Don’t Know JS) 圖書系列，包含一系列深入探討 JavaScript 語言核心機制的書籍。

內容大綱

入門與進階
作用域與閉包
this 與對象原型
類型與文法
異步與性能
ES6 與未來

https://github.com/getify/You-Dont-Know-JS

4. clean-code-javascript

2020 年增長 15.1K

優秀的 JS 代碼規范。

比如：對相同類型的變量使用相同的關鍵字

Bad：

getUserInfo();? getClientData();? getCustomerRecord();

Good：

getUser();

再比如：使用可搜索的命名

在開發過程中，我們閱讀代碼的時間會遠遠超過編寫代碼的時間，因此保證代碼的可讀性與可搜索會非常重要。

切記，沒事不要坑自己。

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

該項目講的是滿足你所有開發需求的簡短代碼段，里面都是些經常會用到而且是非常經典的代碼，非常值得學習！

比如 JavaScript 模塊就分為了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便學習的。

比如：你必須知道的 4 種 JavaScript 數組方法

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 中實現睡眠功能？

同步版本

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)

其實上面講到的事例里面還提供 api 和方法的講解的，方便讀者能看懂的，這里就不寫出來了。

還想學更多的經典 js 代碼片段，請看下面的倉庫

https://github.com/30-seconds/30-seconds-of-code

6. javascript

2020 年增長 11.8K

這個項目是 JavaScript 編程風格指南。

包含了：類型、對象、數組、字符串、函數、屬性、變量、提升、比較運算符 & 等號、塊、注釋、空白、逗號、分號、類型轉化、命名規則、存取器、構造函數、事件、模塊、jQuery、ECMAScript 5 兼容性、測試、性能、資源、JavaScript 風格指南說明

https://github.com/airbnb/javascript

7. tech-interview-handbook

2020 年增長 10.6K

技術人員求職面試，單刷leetcode上的大廠題庫可能還不夠。

簡歷怎么寫才能吸引HR的眼光，可能會被技術老大問到哪些常見問題，拿到Offer之后怎樣才能讓自己的優勢最大化然后優中選優？

面對這些赤果果的問題，目前就職于Facebook的新加坡小哥Yangshun Tay就整理了一份干貨。

面試全流程需要注意的事項都在里面了，包含從簡歷準備、面經和談判全過程，教你如何避雷不踩坑。

精心策劃的內容可幫助您獲得下一次技術面試的機會，重點是算法。

除了常見的算法問題外，其他出色的功能還包括：

如何準備編碼面試
面試備忘單-直截了當的注意事項
按主題分類的算法技巧和最佳實踐問題
“前端面試問題”答案
頂尖科技公司的面試形式
頂尖科技公司提出的行為問題
在面試結束時問您的面試官的好問題
有用的簡歷提示，以使您的簡歷受到關注以及注意事項

https://github.com/yangshun/tech-interview-handbook

8. freeCodeCamp

2020 年增長 10.4K

FreeCodeCamp 是一個自由開源的學習編程的社區，致力于幫助人們利用零散時間學習編程。

它的使命是 Learn to code and help nonprofits（學習編程，去幫助那些非盈利組織）。

FCC 涵蓋 HTML5、CSS、React、JavaScript、Database 等課程，游戲化程度非常高，學員可以通過線上聊天室和線下社區活動（Coffee and Code）相互幫助。

目前覆蓋全球 160+ 個國家、1000+ 個城市，40W+ 開發者在平臺學習。

https://github.com/freeCodeCamp/freeCodeCamp

9. Front-End-Checklist

2020 年增長 9.2K

該項目是詳盡的關于前端開發的清單，它列出了將 HTML 頁面投入生產之前需要進行測試的所有元素。

它基于眾多前端開發人員的多年經驗，其中一部分整合自其他的開源清單。

內容包含：

Head
HTML
Webfonts
CSS
Images
JavaScript
Security
Performance
Accessibility
SEO

https://github.com/thedaviddias/Front-End-Checklist

10. vanillawebprojects

2020 年增長 8.2K

新手上路最開始用的就是基礎的 HTML+CSS+JS 三件套，而在框架和庫越來越多的現在，更多的時候使用它們來提高效率是常見的選擇。

這個項目則是反過來，是使用老三件套實現的一些小項目合集，不管是為了更好理解框架，還是為了驗證一下自己的知識水平，重新操刀老三件套都不失為一個好選擇，要知道不管是什么框架和庫，基礎都是由這三板斧搭建起來的。

https://github.com/bradtraversy/vanillawebprojects

最后

不知不覺，原創文章已經寫到第 33 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發很有幫助的。

原創不易，一篇優質的文章都是要肝幾個晚上才能肝出來的，花費很多時間、精力去篩選和寫推薦理由，大佬們看完文章后順手點個贊或者轉發吧，給貓哥一點鼓勵吧。

往期精文請看下方寶藏倉庫，請慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

微信搜 “前端GitHub”，回復 “電子書” 即可以獲得上面 160 本前端精華書籍哦，貓哥 WX：CB834301747 。

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

往期精文

推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目
Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目
GitHub 2W 星：一鍵生成前后端代碼
程序員必備的 10 大 GitHub 倉庫，前端占了 7 個！

原創不易，老板點個贊吧

總結

以上是生活随笔為你收集整理的猛增 110K Star！年增长数最多的 10 大顶级前端学习资源项目！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：推荐 7 个 Vue2、Vue3 源码解
下一篇：前端趋势榜：上周最热门的 10 大前端项