关于javascript: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 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); // 6const 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 与 instanceofthis, 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 = 3let b = new Number(3)let c = 3console.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 个超火的大厂前端代码标准，你也能写出诗一样的代码！