2021 年已经来了,相信有一些小伙伴已经开始立 2021 年的 flag 了。在 2020 年有一些小伙伴,私下问阿宝哥有没有前端的学习资料。为了统一回答这个问题,阿宝哥精心挑选了 Github 上 10 个不错的开源项目。javascript
固然这 10 个项目不只限于前端领域,但愿这些项目对小伙伴的进阶能有所帮助。下面咱们先来介绍第一个项目 —— build-your-own-x。前端
🤓 Build your own (insert technology here)
Watch | Star | Fork | Date |
---|---|---|---|
3.5K | 92.3K | 8.1K | 2021-01-04 |
该仓库涉及了 27 个领域的内容,每一个领域会使用特定的语言来实现某个功能。下图是与前端领域相关的内容:node
关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书(累计下载2.2万+)及 50 几篇 “重学TS” 教程。
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings
Watch | Star | Fork | Date |
---|---|---|---|
3.6K | 91.6K | 15.4K | 2021-01-04 |
该仓库包含了多种 基于 JavaScript 的算法与数据结构。每种算法和数据结构都有本身的 README,包含相关说明和连接,以便进一步阅读 (还有相关的视频) 。github
Short JavaScript code snippets for all your development needs
Watch | Star | Fork | Date |
---|---|---|---|
2K | 66.9K | 7.4K | 2021-01-04 |
该仓库包含了众多能知足你开发需求,简约的 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
✅ The Node.js best practices list
Watch | Star | Fork | Date |
---|---|---|---|
1.7K | 58.5K | 5.6K | 2021-01-04 |
该仓库介绍了 Node.js 应用的最佳实践,包含如下的内容:后端
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅
Watch | Star | Fork | Date |
---|---|---|---|
1.6K | 52.5K | 4.5K | 2021-01-04 |
对于大多数的 “Todo” 示例来讲,它们只是简单介绍了框架的功能,并无完整介绍使用该框架和相关技术栈,构建真正应用程序所须要的知识和视角。
RealWorld 解决了这个问题,它容许你选择任意前端框架(React,Vue 或 Angular 等)和任意后端框架(Node,Go,Spring 等)来驱动一个真实的、设计精美的全栈应用程序 “Conduit“ 。下图是目前已支持的前端框架(内容较多,只截取部份内容):
🛁 Clean Code concepts adapted for 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 个方面的内容,具体的目录以下图所示:
A long list of (advanced) JavaScript questions, and their explanations ✨
Watch | Star | Fork | Date |
---|---|---|---|
850 | 27K | 3.6K | 2021-01-04 |
该仓库包含了从基础到进阶的 JavaScript 知识,利用该仓库你能够测试你对 JavaScript 知识的掌握程度,也能够帮助你准备面试。
A curated list of software and architecture related design patterns.
Watch | Star | Fork | Date |
---|---|---|---|
477 | 11.6K | 931 | 2021-01-04 |
该仓库包含了软件与架构相关的设计模式的精选列表。在软件工程中,设计模式(Design Pattern)是对软件设计中广泛存在(反复出现)的各类问题,所提出的解决方案。这个术语是由埃里希·伽玛(Erich Gamma)等人在1990年代从建筑设计领域引入到计算机科学的。
Roadmap to becoming a web developer in 2021
Watch | Star | Fork | Date |
---|---|---|---|
7.4K | 142K | 21.3K | 2021-01-04 |
该仓库包含一组图表,这些图表展现了成为一个 Web 开发者的学习路线图。该仓库含有前端、后端和 DevOps 的学习路线图,这里咱们只介绍前端的学习路线图(原图是长图,这里只截取部分区域):
📚 Freely available programming books
Watch | Star | Fork | Date |
---|---|---|---|
9.2K | 170K | 39.8K | 2021-01-04 |
该仓库包含了多种语言的免费学习资源列表,下图是中文免费资源列表(内容较多,只截取部份内容):
好的,到这里全部的开源项目都已经介绍完了,若是小伙伴有其余的不错的开源项目,欢迎给阿宝哥留言哟。
关注「全栈修仙之路」阅读阿宝哥原创的 4 本免费电子书(累计下载 2.2万+)及 9 篇源码分析系列教程。