[[373657]]

本文轉(zhuǎn)載自微信公眾號(hào)「全棧修仙之路」，作者阿寶哥 。轉(zhuǎn)載本文請(qǐng)聯(lián)系全棧修仙之路公眾號(hào)。  

2021 年已經(jīng)來(lái)了，相信有一些小伙伴已經(jīng)開(kāi)始立 2021 年的 flag 了。在 2020 年有一些小伙伴，私下問(wèn)阿寶哥有沒(méi)有前端的學(xué)習(xí)資料。為了統(tǒng)一回答這個(gè)問(wèn)題，阿寶哥在元旦期間，精心挑選了 Github 上 10 個(gè)不錯(cuò)的開(kāi)源項(xiàng)目。

當(dāng)然這 10 個(gè)開(kāi)源項(xiàng)目不僅限于前端領(lǐng)域，希望這些項(xiàng)目對(duì)小伙伴的進(jìn)階能有所幫助。下面我們先來(lái)介紹第一個(gè)項(xiàng)目 —— build-your-own-x。

build-your-own-x

 Build your own (insert technology here)

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

該倉(cāng)庫(kù)涉及了 27 個(gè)領(lǐng)域的內(nèi)容，每個(gè)領(lǐng)域會(huì)使用特定的語(yǔ)言來(lái)實(shí)現(xiàn)某個(gè)功能。下圖是與前端領(lǐng)域相關(guān)的內(nèi)容：

JavaScript Algorithms

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

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

該倉(cāng)庫(kù)包含了多種 基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)。每種算法和數(shù)據(jù)結(jié)構(gòu)都有自己的 README，包含相關(guān)說(shuō)明和鏈接，以便進(jìn)一步閱讀 (還有相關(guān)的視頻) 。

30 Seconds of Code

Short JavaScript code snippets for all your development needs

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

該倉(cāng)庫(kù)包含了眾多能滿足你開(kāi)發(fā)需求，簡(jiǎn)約的 JavaScript 代碼片段。比如以下的 listenOnce 函數(shù)，可以保證事件處理器只執(zhí)行一次。

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

該倉(cāng)庫(kù)介紹了 Node.js 應(yīng)用的最佳實(shí)踐，包含以下的內(nèi)容：

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

對(duì)于大多數(shù)的 “Todo” 示例來(lái)說(shuō)，它們只是簡(jiǎn)單介紹了框架的功能，并沒(méi)有完整介紹使用該框架和相關(guān)技術(shù)棧，構(gòu)建真正應(yīng)用程序所需要的知識(shí)和視角。

RealWorld 解決了這個(gè)問(wèn)題，它允許你選擇任意前端框架(React，Vue 或 Angular 等)和任意后端框架(Node，Go，Spring 等)來(lái)驅(qū)動(dòng)一個(gè)真實(shí)的、設(shè)計(jì)精美的全棧應(yīng)用程序 “Conduit“ 。下圖是目前已支持的前端框架(內(nèi)容較多，只截取部分內(nèi)容)：

clean-code-javascript

Clean Code concepts adapted for JavaScript

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

該倉(cāng)庫(kù)介紹了如何寫(xiě)出整潔的 JavaScript 代碼，比如作者建議使用可檢索的名稱(chēng)：

不好的

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

好的

// 使用通俗易懂的常量來(lái)描述該值 
const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; //86400000; 
 
setTimeout(blastOff, MILLISECONDS_IN_A_DAY); 

該倉(cāng)庫(kù)包含了 11 個(gè)方面的內(nèi)容，具體的目錄如下圖所示：

javascript-questions

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

https://github.com/lydiahallie/javascript-questions

該倉(cāng)庫(kù)包含了從基礎(chǔ)到進(jìn)階的 JavaScript 知識(shí)，利用該倉(cāng)庫(kù)你可以測(cè)試你對(duì) JavaScript 知識(shí)的掌握程度，也可以幫助你準(zhǔn)備面試。

awesome-design-patterns

A curated list of software and architecture related design patterns.

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

該倉(cāng)庫(kù)包含了軟件與架構(gòu)相關(guān)的設(shè)計(jì)模式的精選列表。在軟件工程中，設(shè)計(jì)模式(Design Pattern)是對(duì)軟件設(shè)計(jì)中普遍存在(反復(fù)出現(xiàn))的各種問(wèn)題，所提出的解決方案。這個(gè)術(shù)語(yǔ)是由埃里希·伽瑪(Erich Gamma)等人在1990年代從建筑設(shè)計(jì)領(lǐng)域引入到計(jì)算機(jī)科學(xué)的。

developer-roadmap

Roadmap to becoming a web developer in 2021

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

7.4K 142K 21.3K 2021-01-04

該倉(cāng)庫(kù)包含一組圖表，這些圖表展示了成為一個(gè) Web 開(kāi)發(fā)者的學(xué)習(xí)路線圖。該倉(cāng)庫(kù)含有前端、后端和 DevOps 的學(xué)習(xí)路線圖，這里我們只介紹前端的學(xué)習(xí)路線圖(原圖是長(zhǎng)圖，這里只截取部分區(qū)域)：

Free Programming Books

Freely available programming books

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

該倉(cāng)庫(kù)包含了多種語(yǔ)言的免費(fèi)學(xué)習(xí)資源列表，下圖是中文免費(fèi)資源列表(內(nèi)容較多，只截取部分內(nèi)容)：