[[373657]]

本文轉載自微信公眾號「全棧修仙之路」，作者阿寶哥 。轉載本文請聯系全棧修仙之路公眾號。  

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

當然這 10 個開源項目不僅限于前端領域，希望這些項目對小伙伴的進階能有所幫助。下面我們先來介紹第一個項目 —— build-your-own-x。

build-your-own-x

 Build your own (insert technology here)

https://github.com/danistefanovic/build-your-own-x

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

JavaScript Algorithms

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

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

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

30 Seconds of Code

Short JavaScript code snippets for all your development needs

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

該倉庫包含了眾多能滿足你開發需求，簡約的 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/goldbergyoni/nodebestpractices

該倉庫介紹了 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/gothinkster/realworld

對于大多數的 “Todo” 示例來說，它們只是簡單介紹了框架的功能，并沒有完整介紹使用該框架和相關技術棧，構建真正應用程序所需要的知識和視角。

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

clean-code-javascript

Clean Code concepts adapted for JavaScript

https://github.com/ryanmcdermott/clean-code-javascript

該倉庫介紹了如何寫出整潔的 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/lydiahallie/javascript-questions

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

awesome-design-patterns

A curated list of software and architecture related design patterns.

https://github.com/DovAmir/awesome-design-patterns

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

developer-roadmap

Roadmap to becoming a web developer in 2021

https://github.com/kamranahmedse/developer-roadmap

7.4K 142K 21.3K 2021-01-04

該倉庫包含一組圖表，這些圖表展示了成為一個 Web 開發者的學習路線圖。該倉庫含有前端、后端和 DevOps 的學習路線圖，這里我們只介紹前端的學習路線圖(原圖是長圖，這里只截取部分區域)：

Free Programming Books

Freely available programming books

https://github.com/EbookFoundation/free-programming-books

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