javascript - 如何在 Angular 中使用原子设计？

Question

在原子设计中使用 Angular 是否可取？

“关于创 build 计系统已经说了很多，其中很多都集中在为颜色、排版、网格、纹理等建立基础。这种思维当然很重要，但我对设计的这些方面，因为它们最终是并将永远是主观的。最近我对我们的界面由什么组成以及我们如何以更有条理的方式构 build 计系统更感兴趣”，Brad Frost。

Answer 1

由于它是基于组件的架构，因此很容易在 Angular 中实现原子设计。事实上，一些鼓励重用、可维护性和组件化的 Angular 最佳实践很自然地适合原子设计范例。

这里是如何在 Atomic Design 和 Angular 之间进行比较的。引用的定义取自“官方来源”:http://atomicdesign.bradfrost.com/chapter-2/

原子

[A]toms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional.

在 Angular 中，您将在组件模板中使用基本的 HTML 元素，如上面引述中列出的元素。

分子

[M]olecules are relatively simple groups of UI elements functioning together as a unit

Angular 最佳实践鼓励创建可在整个应用程序中重复使用(甚至与不同应用程序共享)的小组件。如果您查看 Angular Material 组件库，那里有许多预制组件的示例，它们可以被视为原子设计中的“分子”。

生物

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms.

在您的 Angular 应用程序中，您通常会有可重用的容器或组件。页面页眉和页脚、导航菜单、产品预览框等都是一些示例。这些容器由较小的组件(“分子”)组成，并在整个应用程序(甚至多个应用程序)中重复使用。

模板

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure.

上面的定义，经过一些小的修改，也可以是描述 Angular 模板系统的东西。要创建页面，您需要放置组件(“有机体”、“分子”、“原子”)来创建页面结构。

页面

Pages are specific instances of templates that show what a UI looks like with real representative content in place.

这本质上是 Angular 组件模板在浏览器中的渲染输出——可以说是 Angular 项目的最终产品。

如您所见，Atomic Design 可以应用于 Angular 项目。此外，Angular 的组件架构和 Atomic Design 之间有很多重叠。