大家好，我是你们的猫哥，一只不爱吃鱼，不爱喵喵的超级猫。项目和常用技能在这里共享。公众号：前端GitHub，专注于在GitHub上挖掘优秀的前端开源项目，并以专题的形式进行推荐。每个话题有10个左右的好项目，每周推送一到三篇精英文章。面试项目、css技巧项目、代码规范项目、数据结构与算法项目、管理后台模板、前端必备在线工具等专题推荐了近百个优秀项目。平时如何找到好的开源项目，可以看这篇文章：GitHub挖矿神仙技巧——如何找到优秀的开源项目以下为【前端GitHub】第12期精华内容。1.30秒代码这个项目讨论了满足您所有开发需求的短代码片段。里面包含了一些经常用到的非常经典的代码，非常值得学习！例如，JavaScript模块分为All、Array、Browser、Date、Function、Math、Node、Object、String，方便学习。例如：4个你必须知道的JavaScript数组方法Array.prototype.map()constarr=[1,2,3];constdouble=x=>x*2;arr.map（双）；//[2,4,6]Array.prototype.filter()constarr=[1,2,3];constisOdd=x=>x%2===1;arr.filter(isOdd);//[1,3]Array.prototype.reduce()constarr=[1,2,3];constsum=(x,y)=>x+y;arr.reduce(sum,0);//6constincrement=(x,y)=>[...x,x[x.length-1]+y];arr.reduce（增量，[0]）；//[0,1,3,6]Array.prototype.find()constarr=[1,2,3];constisOdd=x=>x%2===1;arr.find(isOdd);//1再举个例子：如何在JavaScript中实现sleep函数？同步版本constsleepSync=(ms)=>{constend=newDate().getTime()+ms;while(newDate().getTime(){console.log(1);睡眠同步（500）；控制台日志（2）；console.log(3);};printNums();//日志：1、2、3（500毫秒后记录2和3）异步版本constsleep=(ms)=>newPromise(resolve=>setTimeout(resolve,ms));constprintNums=async()=>{console.log(1);等待睡眠（500）；控制台日志（2）；console.log(3);};printNums();//Logs:1,2,3(500ms后记录2和3日志)其实上面提到的例子也给出了api和方法的解释，方便读者理解，就不写了在这里，想学习更多经典的js代码片段，请看下面的仓库https://github.com/30-seconds...2.33-js-conceptsJavaScript开发者应该知道的33个概念这个项目是为了帮助开发者而创建的掌握JavaScript概念。不是必须的，但是可以作为以后学习（JavaScript）的指导。目录调用堆栈基本类型值类型和引用类型隐式、显式、标称和Duck类型==和===、typeof和instanceofthis、调用、应用和绑定函数作用域、块作用域和词法作用域闭包高阶函数，例如map,reduce,filterExpressionsandstatementvariablespromotionPromiseImmediateexecutionoffunctions,modularization,namespacerecursivealgorithmdatastructuremessagequeueandeventloopsetTimeout,setIntervalandrequestAnimationFrame继承，多态和代码重用按位操作字符，类数组对象和类型化数组DOM树和渲染过程new和构造函数、instanceof和实例原型继承和原型链Object.create和Object.assign工厂函数和类设计模式Memoization纯函数、函数副作用和状态变化消耗性能操作和时间复杂度JavaScriptEngineBinary,Decimal,十六进制,科学计数法适合学习的偏函数、柯里化、组合和管道代码清理。https://github.com/leonardoms...3.javascript-questionsJavaScript高级问题列表。从基础到高级：测试您的JavaScript知识，更新您的知识或准备编码面试！例如，下面的输出是什么？leta=3letb=newNumber(3)letc=3console.log(a==b)console.log(a===b)console.log(b===c)A:truefalsetrueB:falsefalsetrueC:truefalsefalseD:falsetruetrue答案：C解释：newNumber()是一个内置的构造函数。虽然它看起来像一个数字，但它实际上并不是一个实数：它有很多额外的功能，而且它是一个对象。当我们使用==运算符时，它只是检查两者是否具有相同的值。因为它们的值都是3，所以返回true。那么，当我们使用===运算符时，值和类型都应该相同。newNumber()是一个对象而不是数字，因此返回false。https://github.com/lydiahalli...4.JavaScript30在30天内使用vanillaJavaScript完成30个项目。每天完成的HTML、CSS和javascript解决方案。https://github.com/wesbos/JavaScript305。Codewars有点类似于leetcode。它还与平台上的其他人一起完成真正的代码挑战，以提高您的技术。相比其他平台，codewars出的题更贴合实际工作和生活。很多问题都会给出题目背景，更让人身临其境。提高技能的可能性：使用社区创建的型来挑战自己，以提高各种技能。掌握您当前选择的语言，或扩展您对新语言的理解。要加入这个社区，您必须首先通过回答测验来证明您的技能。https://www.codewars.com/6。ES6入门教程前端大家应该都知道的ES6开源书籍。毛哥初入前端的时候，跟阮一峰老师学习了开源的ES6内容，一直实用到现在！《ECMAScript 6 入门教程》是一个全面介绍ECMAScript6新引入的语法特性的开源JavaScript语言教程。本书涵盖了ES6与之前版本ES5的所有差异，对涉及的语法知识进行了详细介绍，并给出了大量简洁易懂的示例代码。本书难度中等，适合已经掌握ES5的读者了解该语言的最新发展；它也可以用作搜索新语法点的参考手册。如果你是JavaScript语言的初学者，建议在阅读本书之前学习完《JavaScript 语言入门教程》。https://es6.ruanyifeng.com/7。JavaScript教程本教程全面介绍了JavaScript核心语法，涵盖了ES5和DOM规范的所有内容。也是阮一风老师写的。真的很通俗易懂，非常适合前端学习。不得不说，知识渊博的人写的技术文章是非常通俗易懂的。在内容上，从最简单的开始，循序渐进，由浅入深，力求通俗易懂。所有章节均有大量代码示例，易于理解和模仿，可用于实际项目，即学即用。本教程适合初学者作为JavaScript语言的入门教程。学完后可以承担实际的web开发工作，也适合作为日常使用的参考手册。内容入门数据类型运算符语法主题标准库面向对象编程异步操作DOM事件浏览器模型附录：Web元素接口https://wangdoc.com/javascript/8。现代JavaScript教程基于最新的JavaScript标准。通过简单但足够详细的内容，它将向您讲解从基础到高级的JavaScript相关知识。课程的核心由两部分组成，涵盖JavaScript编程语言和浏览器行为的知识。还有一系列专题文章。JavaScript编程语言在这里，我们将从头开始学习JavaScript，并学习OOP等高级概念。本教程侧重于语言本身，我们默认使用最小环境。浏览器：文档、事件、界面了解如何管理浏览器页面：添加元素、操纵元素大小和位置、动态创建界面以及与访问者交互。其他文章本教程前两部分未涵盖的其他主题的内容列表。这里没有明确的层级，大家可以按照自己需要的顺序阅读文章。https://zh.javascript.info/9。MDNMDNWebDocs网站提供有关开放式Web技术的信息，包括用于网站和渐进式Web应用程序的HTML、CSS和API。Mozilla、微软、谷歌、三星和W3C将合作使MDN成为网络上最好的文档。所以在这个平台上学习web技术比较权威。来自开发人员，服务开发人员。https://developer.mozilla.org...10。clean-code-javascript优秀的JS代码规范。例如：对相同类型的变量使用相同的关键字Bad:getUserInfo();获取客户端数据（）；获取客户记录（）；好的：getUser()；会远远超过写代码的时间，所以保证代码的可读性和可搜索性非常重要。记住，不要在无事可做时欺骗自己。Bad://525600是什么意思？for(vari=0;i<525600;i++){runCronJob();}Good://声明为全局变量varMINUTES_IN_A_YEAR=525600;for(vari=0;i字符串；输入NameOrResolver=名称|名称解析器；functiongetName(n:NameOrResolver):Name{if(typeofn==='string'){返回n;}else{返回n();在上面的例子中，我们使用type创建了一个类型别名。类型别名通常与联合类型一起使用。https://ts.xcatliu.com12。w3school前端必知的Web技术教程平台。虽然很多前端都知道，但是还是有必要提一下。领先的网络技术教程-全部免费。在W3School，您可以找到所需的所有建站教程。从基本的HTML到CSS，再到高级的XML、SQL、JS。在这里学习前端最好的一点就是有一个demo可以学习，可以验证你的效果或者输出。https://www.w3school.com.cn/j...不知不觉已经写到第12期了，分享了近百个不错的前端项目。往期精品库请看下方宝库，点击非常危险，请谨慎进入！【FrontEndGitHub】：https://github.com/FrontEndGitHub/FrontEndGitHub如何找到好的开源项目，可以看看这篇文章：如何在GitHub上找到优秀的开源项目以及如何使用GitHub进行精准搜索魔法技能。觉得有用吗？喜欢就收藏，顺便给个赞，您的支持就是对超猫最大的鼓励！超猫的wx：CB834301747，微信搜索“前端GitHub”，回复“电子书”，获取160本前端必备书籍。上期GitHub上10个超火的前端面试项目，打造属于你的加薪宝库！GitHub上超火的10个CSS技能项目，寻找写CSS的灵感！11款超人气前端必备在线工具，终于有时间上班摸鱼了11款超人气前端大厂代码规范，你也可以写出如诗如画的代码！
