介绍

我将谈论原子设计，阅读有关它的文档后所学到的知识以及Brad Frost Book，他在那里解释了如何实际构建您的应用程序。我可能会有一些错误的做法和错误，所以我开放有反馈并查看不同的观点。

什么是原子设计？

当我们谈论原子设计时，我们正在谈论一种构建组件的方法，以便重复使用并写得很好，以便其他开发人员理解它。

它如何结构？

原子设计与化学一样， Atoms ，分子，有机体， >页。
Atoms 基本上是其中的较小部分，我们将按钮，文本等诸如此类。基本上，任何足够小的东西到处都可以重复使用，它可能只有一个DIV标签。
分子是通过化学键合并在一起的两个或多个原子的组。这些原子的组合具有自己独特的特性，并且比原子更有切实和操作。
生物是将作为一个单位起作用的分子的组件。这些相对复杂的结构范围从单细胞生物一直到人类等令人难以置信的复杂生物。
模板是页面级对象，将组件放置在布局中并阐明设计的基础内容结构。为了基于我们以前的示例，我们可以采用标题生物并将其应用于主页模板。
页面是模板的特定实例，这些模板显示了UI的外观，而真实的代表性内容到位。在我们以前的示例的基础上，我们可以将主页模板并将代表性文本，图像和媒体倒入模板中以显示实际内容。

您为什么要使用原子设计？

有几个原因，但我想说的是，要保持您的代码清洁和可重复使用，如果您正在编写的代码很干净，这将始终应用。

创建新组件时应该考虑什么？

您应该总是想，这是原子吗？分子？有机体吗？，有一些线索要弄清楚您在做什么。让我详细说明：如果您不使用任何原子，而只是使用一小部分标签，请说，您可能正在创建一个新的原子。如果您使用多个原子，则正在创建一个分子并继续进行。
为了重复使用，您应该始终考虑要添加到组件中的内容，除非有100％必要，否则请不要将业务逻辑放在上面

删除业务逻辑。

建议

您应该始终与您的团队讨论新的重大变化，如果您要创建一个新的分子或生物体，您将始终诱使添加不必要的逻辑，因此我建议您与您的同事讨论并尝试找出最佳解决方案。

在这里，我将留下您的原子设计手册。Here
欢呼，劳塔罗。