如何设计简洁、直观的前端架构?( 三 )

尝试对组件进行概括,以便在不同的用例中反复使用。

将彼此相关的组件划分到同一个目录当中,且保证这些目录不会在目录之外的组件中使用。

辅助函数

辅助函数应该强大且中立。辅助函数应该与渲染逻辑区分开来。仅在组件需要时使用辅助函数,且一般应该进行声明。辅助函数的作用在于:

处理从服务器处接收到的数据以适应 UI 逻辑。

特定于组件逻辑。

与浏览器规范相关。

与开发人员实施的逻辑相关,其通过不同的标准以达成目标。

将彼此相关的组件划分到同一个文件当中,将公共函数划分至utils文件当中 。

API 服务

服务是数据间的链接。API 服务是指负责在参数特定的情况下,调用服务器以获取数据的代码。我们不应直接从 UI 逻辑当中调用服务。因为如果我们需要在多个位置实现相同的 API 调用,且端点、标题等会发生变更,那么对不同位置进行服务修改将变得非常困难。下面来看如何进行服务声明:

推荐阅读