本文共 8107 字，大约阅读时间需要 27 分钟。
面向对象的前端开发
It’s that time again to get learning! As before, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help you get up to speed in different areas of front-end development.
是时候再次开始学习！ 和以前一样，我收集了许多不同的学习资源，包括指南，文档和其他有用的网站，以帮助您快速掌握前端开发的不同领域。
So please enjoy the ninth installment of our Docs and Guides series and don’t forget to let me know in the comments of any others that I haven’t yet included.
因此，请享受我们的文档和指南系列的第九部分，不要忘记在我尚未包括的其他任何人的评论中让我知道。
This is not primarily a learning guide, but a module that you can install and run via the command line to test your code against a set of rules for JavaScript syntax. It’s also available as a text editor plugin. As a guide, however, you can read the , which should be a good way for beginners and others to get a sense of some general JavaScript best practices.
这主要不是学习指南，而是一个模块，您可以通过命令行安装和运行该模块，以针对一组JavaScript语法规则测试代码。 它也可以作为文本编辑器插件使用。 但是，作为指南，您可以阅读 ，对于初学者和其他人而言，这应该是了解一些通用JavaScript最佳做法的好方法。
“Webpack is a popular module bundler, a tool for bundling application source code in convenient chunks and for loading that code from a server into a browser.” This guide is on the official Angular website, so the guide is geared towards using Webpack with Angular 2 apps.
“ Webpack是一个流行的模块捆绑器，它是一种将应用程序源代码捆绑在方便的块中并将该代码从服务器加载到浏览器中的工具。” 该指南位于Angular官方网站上，因此该指南旨在将Webpack与Angular 2应用程序结合使用。
“How HTML elements are supported by screen readers.” Consists of four tables of data covering JAWS on Firefox on Windows 10, VoiceOver and Safari 9 on OSX, and NVDA and Firefox on Windows 8.1, with more tests to come.
“屏幕阅读器如何支持HTML元素。” 由四个数据表组成，这些数据表涵盖Windows 10上的Firefox上的JAWS，OSX上的VoiceOver和Safari 9以及Windows 8.1上的NVDA和Firefox，并且还有更多测试。
This is more for designers than developers, but it’s a really nicely designed and useful interactive tool for those who want to become more familiar with typography terminology. Made by the folks at Supremo, a Manchester-based design agency.
对于设计人员而言，这比对开发人员而言要多得多，但是对于那些想要更加熟悉印刷术术语的人来说，它是一个设计精美且实用的交互式工具。 由位于曼彻斯特的设计公司Supremo的人们制作。
This is an extensive resource of links focused primarily on designing and coding HTML email. Lots of stuff under various categories including people to follow, courses, blogs to read, tools, and email service providers.
这是一个广泛的链接资源，主要用于设计和编码HTML电子邮件。 各种类别下的很多东西，包括要关注的人，课程，要阅读的博客，工具和电子邮件服务提供商。
There are so many different flexbox guides and tools floating around, but here’s something a little different. This guide shows you how to achieve flexbox-like effects in your layouts using the traditional methods. Nice to see them all in one post like this, with code examples.
周围有很多不同的flexbox指南和工具，但这有些不同。 本指南向您展示了如何使用传统方法在布局中实现类似Flexbox的效果。 很高兴能在一篇这样的文章中看到他们，并提供代码示例。
This is an “Angular styleguide for teams” by Todd Motto, a Developer Advocate with Telerik. Todd also offers on AngularJS development. This styleguide “has been rewritten from the ground up for ES2015, the changes in Angular 1.5+ for future-upgrading your application to Angular 2.”
这是Telerik的开发者倡导者Todd Motto撰写的“团队的角度样式指南”。 Todd还提供有关AngularJS开发的 。 该样式指南“已针对ES2015重新进行了重写，对Angular 1.5+进行了更改，以便将来将应用程序升级到Angular2。”
This site gives you statistics on how popular websites and frameworks rank when it comes to efficient, maintainable CSS. It displays data on CSS file size, specificity scores, and CSS property usage.
该网站为您提供有关高效，可维护CSS时流行网站和框架排名的统计数据。 它显示有关CSS文件大小，特异性得分和CSS属性使用情况的数据。
Credit to Umar Hansa . This is the core CSS file that Chrome uses to provide some base default styles for HTML elements. It’s interesting to skim through it because there are definitely some oddities in there.
Umar Hansa 。 这是Chrome用来为HTML元素提供一些基本默认样式的核心CSS文件。 略过它很有趣，因为其中肯定有一些奇怪之处。
“A list of everything that could go in the <head> of your document.” I like this because it lists not only the standard elements but also vendor-specific stuff that many of us see but maybe don’t fully understand.
“文档<head>中可能包含的所有内容的列表。” 我之所以喜欢它，是因为它不仅列出了标准元素，而且还列出了我们中许多人看到但也许不完全了解的特定于供应商的东西。
An eight-part tutorial by Greg Reimer covering ES6 Generators. “Generators are an under-appreciated feature of modern JavaScript. I believe this is because generators are just one half of a two-part whole comprising both generators and iterators, and that learning one without the other paints an incomplete picture. For myself at least, the ah-ha! moment didn’t come until I zoomed out and looked at iterators and generators holistically.”
Greg Reimer撰写的由八部分组成的教程涵盖了ES6 Generators。 “生成器是现代JavaScript未被重视的功能。 我相信这是因为生成器只是包含生成器和迭代器的两部分组成的整体的一半，并且在没有其他学习的情况下学习一个并不完整。 至少对我自己来说，啊哈！ 直到我放大并全面地查看迭代器和生成器的那一刻才来。”
Technically this is back-end, but relevant to JavaScript developers. This is a set of compatibility tables for ES2015 but applied only to Node.js.
从技术上讲，这是后端，但与JavaScript开发人员有关。 这是ES2015的一组兼容性表，但仅适用于Node.js。
I’ve included this one in a previous post, but it’s been redesigned and it looks great. “This site tests which new HTML5 features are accessibly supported by major browsers. This includes if they are keyboard accessible, mapped to the platform accessibility APIs, and if any accessibility related features are supported.”
我已经在上一篇文章中包含了此文章，但是它已经过重新设计，看起来很棒。 “该站点测试了主要浏览器可访问支持哪些新HTML5功能。 这包括它们是否可以通过键盘访问，是否已映射到平台可访问性API，以及是否支持任何与可访问性相关的功能。”
“Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.” This is a 12-part guide by Adam Silver.
“编写CSS时不必担心过分的，预先存在的样式会引起问题。 “ MaintainableCSS”是一种编写模块化，可伸缩且当然是可维护CSS的方法。” 这是由Adam Silver撰写的12部分的指南。
Originally started by Hugo Giraudel, this is a community-driven attempt at explaining using a few simple phrases the many buzzwords making up the current JavaScript ecosystem. “The idea is not to replace individual documentations, but to act as some kind of glossary that can be easily referenced.”
最初是由Hugo Giraudel发起的，这是一个社区驱动的尝试，目的是使用一些简单的短语来解释构成当前JavaScript生态系统的许多流行词。 “这个想法不是要取代单个文档，而是要充当易于理解的词汇表。”
A cheatsheet for Bootstrap 4, from Alex at HackerThemes. The site has a really nice interactive layout that displays the clicked item as a code snippet and demo at the bottom of the viewport. You can also click to highlight all the new stuff in version 4.
HackerThemes的Alex的Bootstrap 4备忘单。 该网站的交互布局非常好，可以在视口底部将单击的项目显示为代码段和演示。 您也可以单击以突出显示版本4中的所有新内容。
“We’ve created a few cheat sheet study guides to help you get over that initial AngularJS learning curve, and provide you with a reference for your daily work.” Includes three cheat sheets: AngularJS Core Services, AngularJS Directive Definition Object, and AngularJS ui-router.
“我们已经创建了一些备忘单学习指南，以帮助您克服最初的AngularJS学习曲线，并为您的日常工作提供参考。” 包括三个备忘单：AngularJS核心服务，AngularJS指令定义对象和AngularJS ui路由器。
A flowchart by Dan Abramov for those who have had trouble grasping different concepts when using React. The flowchart offers some do’s and don’ts type of suggestions to help you simplify things so you can understand the library better.
Dan Abramov的流程图，供那些在使用React时难以掌握不同概念的人使用。 流程图提供了一些可以做或不能做的建议，以帮助您简化事情，以便您更好地理解库。
“Flexbox is awesome, but it introduces many new concepts that can make it difficult to use. These interactive examples will show you practical ways to use it to build UI components. They start out simple and get more complex near the end.”
“ Flexbox很棒，但是它引入了许多新概念，使它们难以使用。 这些交互式示例将向您展示使用它构建UI组件的实用方法。 它们从简单开始，到结束时变得更加复杂。”
Not just for front-end developers, but certainly something worth looking into for all in the developer field. “The best defense against hackers is a well-informed development team. Our interactive exercises can teach your team about today’s most common security vulnerabilities.”
不仅仅针对前端开发人员，而且当然值得在开发人员领域中研究所有东西。 “针对黑客的最佳防御方法是拥有一支消息灵通的开发团队。 我们的互动练习可以教会您的团队有关当今最常见的安全漏洞。”
If you’ve built or know of another learning resource for front-end developers, drop it in the comments and I’ll consider it for a future post.
如果您已经为前端开发人员构建或了解其他学习资源，请将其放入评论中，我将在以后的文章中考虑。
In the meantime, here are the previous posts in this series:
同时，这是本系列中的先前文章：
翻译自:
面向对象的前端开发
转载地址：http://mkrgb.baihongyu.com/