前端進階不可錯過的 10 個 Github 倉庫

2021 年已經來了，相信有一些小夥伴已經開始立 2021 年的 flag 了。在 2020 年有一些小夥伴，私下問阿寶哥有沒有前端的學習資料。爲了統一回答這個問題，阿寶哥精心挑選了 Github 上 10 個不錯的開源項目。

固然這 10 個項目不只限於前端領域，但願這些項目對小夥伴的進階能有所幫助。下面咱們先來介紹第一個項目 —— build-your-own-x。

build-your-own-x

🤓 Build your own (insert technology here)

https://github.com/danistefan...

Watch	Star	Fork	Date
3.5K	92.3K	8.1K	2021-01-04

該倉庫涉及了 27 個領域的內容，每一個領域會使用特定的語言來實現某個功能。下圖是與前端領域相關的內容：

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載2.2萬+）及 50 幾篇 「重學TS」 教程。

JavaScript Algorithms

📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

https://github.com/trekhleb/j...

Watch	Star	Fork	Date
3.6K	91.6K	15.4K	2021-01-04

該倉庫包含了多種 基於 JavaScript 的算法與數據結構。每種算法和數據結構都有本身的 README，包含相關說明和連接，以便進一步閱讀 (還有相關的視頻) 。

30 Seconds of Code

Short JavaScript code snippets for all your development needs

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

Watch	Star	Fork	Date
2K	66.9K	7.4K	2021-01-04

該倉庫包含了衆多能知足你開發需求，簡約的 JavaScript 代碼片斷。好比如下的 listenOnce 函數，能夠保證事件處理器只執行一次。

const listenOnce = (el, evt, fn) => {
  let fired = false;
  el.addEventListener(evt, (e) => {
    if (!fired) fn(e);
    fired = true;
  });
};

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
);  // 'Hello!' will only be logged on the first click

Node Best Practices

✅ The Node.js best practices list

https://github.com/goldbergyo...

Watch	Star	Fork	Date
1.7K	58.5K	5.6K	2021-01-04

該倉庫介紹了 Node.js 應用的最佳實踐，包含如下的內容：

RealWorld example apps

"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅

https://github.com/gothinkste...

Watch	Star	Fork	Date
1.6K	52.5K	4.5K	2021-01-04

對於大多數的 「Todo」 示例來講，它們只是簡單介紹了框架的功能，並無完整介紹使用該框架和相關技術棧，構建真正應用程序所須要的知識和視角。

RealWorld 解決了這個問題，它容許你選擇任意前端框架（React，Vue 或 Angular 等）和任意後端框架（Node，Go，Spring 等）來驅動一個真實的、設計精美的全棧應用程序 「Conduit「 。下圖是目前已支持的前端框架（內容較多，只截取部份內容）：

clean-code-javascript

🛁 Clean Code concepts adapted for JavaScript

https://github.com/ryanmcderm...

Watch	Star	Fork	Date
1.5K	43.9K	5.3K	2021-01-04

該倉庫介紹瞭如何寫出整潔的 JavaScript 代碼，好比做者建議使用可檢索的名稱：

很差的

// 86400000 的用途是什麼？
setTimeout(blastOff, 86400000);

好的

// 使用通俗易懂的常量來描述該值
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

該倉庫包含了 11 個方面的內容，具體的目錄以下圖所示：

javascript-questions

A long list of (advanced) JavaScript questions, and their explanations ✨

https://github.com/lydiahalli...

Watch	Star	Fork	Date
850	27K	3.6K	2021-01-04

該倉庫包含了從基礎到進階的 JavaScript 知識，利用該倉庫你能夠測試你對 JavaScript 知識的掌握程度，也能夠幫助你準備面試。

awesome-design-patterns

A curated list of software and architecture related design patterns.

https://github.com/DovAmir/aw...

Watch	Star	Fork	Date
477	11.6K	931	2021-01-04

該倉庫包含了軟件與架構相關的設計模式的精選列表。在軟件工程中，設計模式（Design Pattern）是對軟件設計中廣泛存在（反覆出現）的各類問題，所提出的解決方案。這個術語是由埃裏希·伽瑪（Erich Gamma）等人在1990年代從建築設計領域引入到計算機科學的。

developer-roadmap

Roadmap to becoming a web developer in 2021

https://github.com/kamranahme...

Watch	Star	Fork	Date
7.4K	142K	21.3K	2021-01-04

該倉庫包含一組圖表，這些圖表展現了成爲一個 Web 開發者的學習路線圖。該倉庫含有前端、後端和 DevOps 的學習路線圖，這裏咱們只介紹前端的學習路線圖（原圖是長圖，這裏只截取部分區域）：

Free Programming Books

📚 Freely available programming books

https://github.com/EbookFound...

Watch	Star	Fork	Date
9.2K	170K	39.8K	2021-01-04

該倉庫包含了多種語言的免費學習資源列表，下圖是中文免費資源列表（內容較多，只截取部份內容）：

好的，到這裏全部的開源項目都已經介紹完了，若是小夥伴有其餘的不錯的開源項目，歡迎給阿寶哥留言喲。

關注「全棧修仙之路」閱讀阿寶哥原創的 4 本免費電子書（累計下載 2.2萬+）及 9 篇源碼分析系列教程。