12 个 GitHub 上超火的前端必备的 JavaScript 项目，找到写 JavaScript 的灵感！

大家好，我是你们的 猫哥，一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~

前言

猫哥是一个常年混迹在 GitHub 上的猫星人，所以发现了不少好的前端开源项目、常用技巧，在此分享给大家。

公众号：前端GitHub，专注于挖掘 GitHub 上优秀的前端开源项目，并以专题的形式推荐，每专题大概 10 个好项目，每周会有一到三篇精华文章推送。

已经推荐了 面试项目、css奇技淫巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具 等专题的近 100 个优秀项目了。

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

以下为【前端GitHub】的第 12 期精华内容。

1. 30-seconds-of-code

该项目讲的是满足你所有开发需求的简短代码段，里面都是些经常会用到而且是非常经典的代码，非常值得学习！

比如 JavaScript 模块就分为了 All、Array、Browser、Date、Function、Math、Node、Object、String 方便学习的。

比如：你必须知道的 4 种 JavaScript 数组方法

Array.prototype.map()

const arr = [1, 2, 3];

const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6

const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]

Array.prototype.find()

const sleep = (ms) =>
  new Promise(resolve => setTimeout(resolve, ms));

const printNums = async() => {
  console.log(1);
  await sleep(500);
  console.log(2);
  console.log(3);
};

printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)

其实上面讲到的事例里面还提供 api 和方法的讲解的，方便读者能看懂的，这里就不写出来了。

还想学更多的 经典 js 代码片段，请看下面的仓库

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

2. 33-js-concepts

JavaScript开发者应懂的 33 个概念

这个项目是为了帮助开发者掌握 JavaScript 概念而创立的。它不是必备，但在未来学习（JavaScript）中，可以作为一篇指南。

目录

入门篇
数据类型 
运算符 
语法专题
标准库
面向对象编程
异步操作 
DOM
事件
浏览器模型
附录：网页元素接口

https://wangdoc.com/javascript/

8. 现代 JavaScript 教程

以最新的 JavaScript 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。

课程的核心内容包含 2 部分，涵盖了 JavaScript 编程语言相关知识和浏览器行为。此外还有一系列的专题文章。

JavaScript 编程语言

在这儿我们将从头开始学习 JavaScript，也会学习 OOP 等相关高级概念。

本教程专注于语言本身，我们默认使用最小环境。

浏览器：文档，事件，接口

学习如何管理浏览器页面：添加元素，操纵元素的大小和位置，动态创建接口并与访问者互动。

其他文章

教程的前两部分未涉及的其他主题的内容列表。此处没有明确的层次结构，你可以按你需要的顺序阅读文章。

https://zh.javascript.info/

9. MDN

MDN Web Docs 网站提供开放网络(Open Web)技术有关的信息,包括用于网站和渐进式网络应用的 HTML、CSS 和 API。

Mozilla, Microsoft, Google, Samsung 和 W3C 将合作把 MDN 打造成最好的 Web 文档。

所以在这个平台学习 web 技术算是比较权威的了。

源于开发者，服务开发者。

https://developer.mozilla.org/zh-CN/

10. clean-code-javascript

优秀的 JS 代码规范。

比如：对相同类型的变量使用相同的关键字

Bad：

//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
  runCronJob();
}

Good:

type 创建类型别名。

类型别名常用于联合类型。

https://ts.xcatliu.com

12. w3school

前端必须知道的 Web 技术教程平台，虽然很多前端都知道了，但是有必要提一下。

领先的 Web 技术教程 - 全部免费。

在 W3School，你可以找到你所需要的所有的网站建设教程。

从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS。

在这里学习前端最好的地方就是有 demo 可能学习，可以验证你的效果或者输出。

标签：Web,GitHub,超火,项目,前端,JavaScript,https
来源： https://blog.51cto.com/u_15291238/2971426