2022 年 8 月前端更新：TypeScript、软件设计模式、焦点样式和单个 CSS 转换属性中的 SOLID 原则
2022 年 8 月前端更新：TypeScript、软件设计模式、焦点样式和单个 CSS 转换属性中的 SOLID 原则
本月我们将介绍 TypeScript 中的 SOLID 原则、React 应用程序的软件设计模式、焦点样式和新的单独 CSS 转换属性。
由 Whitespectre 工程团队提供
August 2022 Frontend Updates: SOLID Principles in TypeScript, Software Design Patterns, Focus Styles and Individual CSS Transform Properties
TypeScript 中的 SOLID 原则
SOLID 是前五个面向对象设计原则的首字母缩写词 罗伯特·C·马丁 ，软件工程师，畅销书作家和有影响力的创始人 敏捷宣言 .
这些原则旨在使面向对象的设计更加灵活和可维护，避免代码异味并使代码重构更加容易。
Shopify 工程师 何塞·米格尔·阿尔瓦雷斯 写了一系列有趣的文章，介绍如何在 TypeScript 中通过实际示例应用这些原则。它们简洁明了，易于阅读和理解，因此请查看它们并确保您正在关注它们！
- TypeScript 中的单一职责原则
- TypeScript 中的开闭原则
- TypeScript 中的 Liskov 替换原则
- TypeScript 中的接口隔离原则
- TypeScript 中的依赖倒置原则
React 应用程序的软件设计模式
与 SOLID 原则一样，软件设计模式也是构建可维护和可扩展的 Web 应用程序的强大工具。 莉迪亚·哈利 和 艾迪·奥斯马尼 在 Awesome 中收集了很多应用于 React 和 JavaScript 的模式 模式.dev 书，即 免费下载 .
这本书已经是一个很好的资源，但网站本身就是 模式的数字档案 书中有关于 CodeSandbox 的实际示例和可视动画示例，非常棒且非常方便。
正如他们所说，设计模式是描述性的，而不是规定性的。仅仅因为您了解它们并不意味着您必须在任何地方使用它们，但它们是一种有价值且经过验证的资源，可用于解决其他人以前面临的特定和反复出现的问题。了解它们将帮助您提高解决问题的能力， 去看一下！
焦点样式和大纲属性
如果您关心可访问性，焦点样式很重要。
浏览器使用 大纲 用于突出显示元素的 CSS 属性，这很棒，因为它不会破坏布局并且在强制颜色模式下效果很好。但与此同时，它的样式并不是最灵活的，让它看起来不错可能会很棘手。
如果您想仅使用背景或框阴影，请阅读 曼努埃尔·马图佐维奇 的文章会让你望而却步： 大纲是你的朋友 .在他的文章中，您将了解为什么应该使用，或者至少回退到 大纲 如果您希望您的网站在强制颜色模式下可导航，同时您学习一些技巧以使您的焦点样式更具吸引力。
单个 CSS 转换属性
要将变换应用于元素，我们使用 CSS 转换 财产。住宿接受一个或多个 变换函数 ，一个接一个地应用。
。目标 {
变换：平移X（50％）旋转（30度）缩放（2）；
}
使用单独的变换属性， 规模 , 旋转 ， 和 翻译 可以单独使用来定义转换的那些部分。
。目标 {
翻译：50% 0；
旋转：30度；
规模：2；
}
这对于悬停样式或动画和过渡效果很有趣，因为您可以更改其中一个属性，而无需重写整个变换声明。现在每个常青浏览器都支持它！
需要考虑的一件事是，与转换声明不同，各个声明不按照声明的顺序应用。 检查规格 了解如何计算变换矩阵 web.dev 中的这篇有趣的文章 如果您想了解更多关于他们的信息！
你有什么要补充的吗？觉得少了点什么？联系我们 @whitespectrehq 或者 领英 ，我们很乐意阅读您的反馈！
不要错过我们以前的故事：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
