前端进阶不可错过的 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...

该仓库涉及了 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...

该仓库包含了多种 基于 JavaScript 的算法与数据结构。每种算法和数据结构都有自己的 README，包含相关说明和链接，以便进一步阅读 (还有相关的视频) 。

30 Seconds of Code

Short JavaScript code snippets for all your development needs

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

该仓库包含了众多能满足你开发需求，简约的 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...

该仓库介绍了 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...

对于大多数的 “Todo” 示例来说，它们只是简单介绍了框架的功能，并没有完整介绍使用该框架和相关技术栈，构建真正应用程序所需要的知识和视角。

RealWorld 解决了这个问题，它允许你选择任意前端框架（React，Vue 或 Angular 等）和任意后端框架（Node，Go，Spring 等）来驱动一个真实的、设计精美的全栈应用程序 “Conduit“ 。下图是目前已支持的前端框架（内容较多，只截取部分内容）：

clean-code-javascript