前端進(jìn)階不可錯過的 10 個 Github 倉庫
本文轉(zhuǎn)載自微信公眾號「全棧修仙之路」，作者阿寶哥 。轉(zhuǎn)載本文請聯(lián)系全棧修仙之路公眾號。
2021 年已經(jīng)來了，相信有一些小伙伴已經(jīng)開始立 2021 年的 flag 了。在 2020 年有一些小伙伴，私下問阿寶哥有沒有前端的學(xué)習(xí)資料。為了統(tǒng)一回答這個問題，阿寶哥在元旦期間，精心挑選了 Github 上 10 個不錯的開源項目。
當(dāng)然這 10 個開源項目不僅限于前端領(lǐng)域，希望這些項目對小伙伴的進(jìn)階能有所幫助。下面我們先來介紹第一個項目 —— 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 個領(lǐng)域的內(nèi)容，每個領(lǐng)域會使用特定的語言來實現(xiàn)某個功能。下圖是與前端領(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ā)需求，簡約的 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)用的最佳實踐，包含以下的內(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 |
對于大多數(shù)的 “Todo” 示例來說，它們只是簡單介紹了框架的功能，并沒有完整介紹使用該框架和相關(guān)技術(shù)棧，構(gòu)建真正應(yīng)用程序所需要的知識和視角。
RealWorld 解決了這個問題，它允許你選擇任意前端框架(React，Vue 或 Angular 等)和任意后端框架(Node，Go，Spring 等)來驅(qū)動一個真實的、設(shè)計精美的全棧應(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 個方面的內(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 知識，利用該倉庫你可以測試你對 JavaScript 知識的掌握程度，也可以幫助你準(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è)計模式的精選列表。在軟件工程中，設(shè)計模式(Design Pattern)是對軟件設(shè)計中普遍存在(反復(fù)出現(xiàn))的各種問題，所提出的解決方案。這個術(shù)語是由埃里希·伽瑪(Erich Gamma)等人在1990年代從建筑設(shè)計領(lǐng)域引入到計算機(jī)科學(xué)的。
developer-roadmap
Roadmap to becoming a web developer in 2021
https://github.com/kamranahmedse/developer-roadmap
| Watch | Star | Fork | Date |
|---|---|---|---|
| 7.4K | 142K | 21.3K | 2021-01-04 |
7.4K 142K 21.3K 2021-01-04
該倉庫包含一組圖表，這些圖表展示了成為一個 Web 開發(fā)者的學(xué)習(xí)路線圖。該倉庫含有前端、后端和 DevOps 的學(xué)習(xí)路線圖，這里我們只介紹前端的學(xué)習(xí)路線圖(原圖是長圖，這里只截取部分區(qū)域)：
Free Programming Books
Freely available programming books
https://github.com/EbookFoundation/free-programming-books
| Watch | Star | Fork | Date |
|---|---|---|---|
| 9.2K | 170K | 39.8K | 2021-01-04 |
該倉庫包含了多種語言的免費學(xué)習(xí)資源列表，下圖是中文免費資源列表(內(nèi)容較多，只截取部分內(nèi)容)：
