前端進(jìn)階不可錯(cuò)過的 10 個(gè) Github 倉庫

作者：阿寶哥 2021-01-05 05:15:02

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

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

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

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

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

該倉庫涉及了 27 個(gè)領(lǐng)域的內(nèi)容，每個(gè)領(lǐng)域會(huì)使用特定的語言來實(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

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

該倉庫包含了多種基于 JavaScript 的算法與數(shù)據(jù)結(jié)構(gòu)。每種算法和數(shù)據(jù)結(jié)構(gòu)都有自己的 README，包含相關(guān)說明和鏈接，以便進(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

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

該倉庫包含了眾多能滿足你開發(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

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

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

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

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

RealWorld 解決了這個(gè)問題，它允許你選擇任意前端框架(React，Vue 或 Angular 等)和任意后端框架(Node，Go，Spring 等)來驅(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

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 個(gè)方面的內(nèi)容，具體的目錄如下圖所示：

javascript-questions

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

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

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

該倉庫包含了從基礎(chǔ)到進(jìn)階的 JavaScript 知識(shí)，利用該倉庫你可以測(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

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

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