共计 5409 个字符，预计需要花费 14 分钟才能阅读完成。
大家好，我是你们的 猫哥，一个不喜爱吃鱼、又不喜爱喵 的超级猫 ~
前言
猫哥是一个长年混迹在 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 double = x => x * 2;
arr.map(double); // [2, 4, 6]Array.prototype.filter()
const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]Array.prototype.reduce()
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 arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1又比方：如何在 JavaScript 中实现睡眠性能？
同步版本
const sleepSync = (ms) => {const end = new Date().getTime() + ms;
while (new Date().getTime() < end) {/* do nothing */}
}
const printNums = () => {console.log(1);
sleepSync(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)异步版本
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…
2. 33-js-concepts
JavaScript 开发者应懂的 33 个概念
这个我的项目是为了帮忙开发者把握 JavaScript 概念而创建的。它不是必备，但在将来学习（JavaScript）中，能够作为一篇指南。
目录
调用堆栈
原始类型
值类型和援用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量晋升
Promise
立刻执行函数, 模块化, 命名空间
递归
算法
数据结构
音讯队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变动
耗性能操作和工夫复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 迷信记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道而且每个主题都蕴含了相干的精彩文章和视频，非常适合学习。
https://github.com/leonardoms…
3. javascript-questions
JavaScript 进阶问题列表。
从根底到高级：测试您对 JavaScript 的理解水平，略微刷新一下常识或为编写代码面试做筹备！
比方上面会输入是什么？
let a = 3
let b = new Number(3)
let c = 3
console.log(a == b)
console.log(a === b)
console.log(b === c)- A: true false true
- B: false false true
- C: true false false
- D: false true true
答案: C
解释：
new Number() 是一个内建的函数结构器。尽管它看着像是一个 number，但它实际上并不是一个实在的 number：它有一堆额定的性能并且它是一个对象。
当咱们应用 == 操作符时，它只会查看两者是否领有雷同的 值。因为它们的值都是 3，因而返回 true。
而后，当咱们应用 === 操作符时，两者的值以及 类型 都应该是雷同的。new Number() 是一个对象而不是 number，因而返回 false。
https://github.com/lydiahalli…
4. JavaScript 30
应用原生 JavaScript 在 30 天内实现 30 个我的项目。
每天实现的 HTML, CSS 和 javascript 解决方案。
https://github.com/wesbos/JavaScript30
5. Codewars
和 leetcode 有点相似，也是在平台上和其他人一起实现实在的代码挑战，晋升你的技术。
相比于其余平台，codewars 给出的问题更加贴合理论工作与生存，很多题都会给出题目背景，更有代入感。
能够晋升技能：在社区创立的 kata 上挑战自我，以加强各种技能。把握您以后抉择的语言，或扩大您对新语言的了解。
要退出这个社区，您必须先答题证实本人的技能才能够的。
https://www.codewars.com/
6. ES6 入门教程
入门的前端都应该都晓得的 ES6 开源书籍，猫哥初入前端时就是学了 阮一峰 老师开源的 ES6 内容的，始终实用至今！
《ECMAScript 6 入门教程》是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法个性。
本书笼罩 ES6 与上一个版本 ES5 的所有不同之处，对波及的语法常识给予具体介绍，并给出大量简洁易懂的示例代码。
本书为中级难度，适宜曾经把握 ES5 的读者，用来理解这门语言的最新倒退；也可当作参考手册，查寻新增的语法点。
如果你是 JavaScript 语言的初学者，倡议先学完《JavaScript 语言入门教程》，再来看这本书。
https://es6.ruanyifeng.com/
7. JavaScript 教程
本教程全面介绍 JavaScript 外围语法，笼罩了 ES5 和 DOM 标准的所有内容。
也是 阮一峰 老师写的，真的十分通俗易懂，非常适合前端学习。
不得不说，常识把握通透的人写的技术文章，十分能让人容易明确。
内容上从最简略的讲起，循序渐进、由浅入深，力求清晰易懂。
所有章节都带有大量的代码实例，便于了解和模拟，能够用到理论我的项目中，即学即用。
本教程适宜初学者当作 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…
10. clean-code-javascript
优良的 JS 代码标准。
比方：对雷同类型的变量应用雷同的关键字
Bad：
getUserInfo();
getClientData();
getCustomerRecord();Good：
getUser();再比方：应用可搜寻的命名
在开发过程中，咱们浏览代码的工夫会远远超过编写代码的工夫，因而保障代码的可读性与可搜寻会十分重要。切记，没事不要坑本人。
Bad:
//525600 到底啥意思？for (var i = 0; i < 525600; i++) {runCronJob();
}Good:
// 申明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {runCronJob();
}https://github.com/ryanmcdermott/clean-code-javascript
11. TypeScript 入门教程
从 JavaScript 程序员的角度总结思考，循序渐进的了解 TypeScript。
这个教程真的是猫哥看过的最残缺而简洁、并且通俗易懂的 TypeScript 教程！
《TypeScript 入门教程》全面介绍了 TypeScript 弱小的类型零碎，残缺而简洁，示例丰盛，比官网文档更易读，非常适合作为初学者学习 TypeScript 的第一本书。—— 阮一峰
比方 类型别名：类型别名用来给一个类型起个新名字。
简略的例子:
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {if (typeof n === 'string') {return n;} else {return n();
}
}
上例中，咱们应用 type 创立类型别名。
类型别名罕用于联结类型。
https://ts.xcatliu.com
12. w3school
前端必须晓得的 Web 技术教程平台，尽管很多前端都晓得了，然而有必要提一下。
当先的 Web 技术教程 – 全副收费。
在 W3School，你能够找到你所须要的所有的网站建设教程。
从根底的 HTML 到 CSS，乃至进阶的 XML、SQL、JS。
在这里学习前端最好的中央就是有 demo 可能学习，能够验证你的成果或者输入。
https://www.w3school.com.cn/j…
最初
人不知; 鬼不觉，曾经写到第 12 期了呢，曾经分享了靠近 100 个好的前端我的项目了呢，往期精文请看下方宝藏仓库，点击很危险，请慎入！
[前端 GitHub]：https://github.com/FrontEndGitHub/FrontEndGitHub
平时如何发现好的开源我的项目，能够看看这篇文章：如何在 GitHub 上发现优良开源我的项目 和 如何应用 GitHub 进行精准搜寻的神仙技巧。
感觉有用？喜爱就珍藏，顺便点个赞吧，你的反对是超级猫最大的激励！
超级猫的 wx：CB834301747，微信搜“前端 GitHub”，回复“电子书”即能够取得 160 本前端精髓书籍哦。
往期精文
- 10 个 GitHub 上超火的前端面试我的项目，打造本人的加薪宝库！
- 10 个 GitHub 上超火的 CSS 技巧我的项目，找到写 CSS 的灵感！
- 11 个超火的前端必备在线工具，终于有工夫下班摸鱼了
- 11 个超火的大厂前端代码标准，你也能写出诗一样的代码！