Question

当你有一个拥有数百个组件的大型应用程序时，其中一些组件会被其他组件大量共享，其中一些只是布局或简单视图。那么组织组件有什么好的建议吗？通过模块？还是按用途？或其他一些政策？

Answer 1

我每页创建一个目录，然后坚持每个文件一个组件（即AddButton将在add_button.js.jsx）。我总是将该页面的顶级组件添加为App。

用户
- user_list.js.jsx
- user_app.js.jsx
仪表板
- dashboard_app.js.jsx
- histogram.js.jsx
分析
共享
- 按钮
  - add_button.js.jsx
  - reset_button.js.jsx
- list.js.jsx
- table.js.jsx

这已经成为我默认的一段时间，现在很好奇，看看别人如何继续。

Answer 2

就个人而言，我更喜欢将一次性组件组保存在同一个文件中。虽然更多的组件是好的，但更多的文件会导致更难调试，因为你必须不断地在它们之间跳转。我的文件夹结构通常如下所示：

观
- 用户
  - show.js（包含视图特定组件和引用共享组件的单个视图）
  - index.js
- 窗口小部件
  - _form.js（仅在小部件的上下文中重用）
  - new.js
  - edit.js
组件（在网站上重复使用多个位置）
- List.js
- ListItem.js
- Navbar.js
- Footer.js

Answer 3

您可能需要考虑遵循BEM建议的File System Organization pattern。

BEM方法中使用的基于组件的方法也决定了 BEM项目在文件系统中组织的方式。在BEM中，它是不仅仅是分成独立组件的界面，即块，但块的实现也分为独立部分，即文件。

如果您不熟悉BEM，请参阅concise introduction：

BEM - 意为块，元素，修饰符 - 是前端命名方法是由Yandex的人提出的。这是一种聪明的方式命名你的CSS类，以赋予它们更多的透明度和意义其他开发者。它们更严格，信息更丰富使BEM命名约定成为开发人员团队的理想选择可能持续一段时间的大型项目。

您的Vue / React组件可以将一对一映射到BEM块，这些块保存在包含JS实现，CSS样式和相关模板的单个文件夹中。

blocks/
    input/
        input.css       # `input` block implementation in CSS technology
        input.js        # `input` block implementation in JavaScript technology
    button/
        button.css
        button.js
        button.png

随着项目变得越来越复杂，存储修饰符和元素在单独的文件中并且被分组到相应的命名块子目录中可能是有益的

blocks/
    input/
        _type/                        # `type` modifier directory
            input_type_search.css     # Implementation of modifier `type` with value `search` in CSS technology
        __box/                        # `box` element directory
            input__box.css
        input.css
        input.js
    button/
        button.css
        button.js
        button.png

组织数百个组件的最佳实践？

3 个答案: