做好前端项目架构设计的8个要点
极客时间编辑部
讲述：初明明大小：4.39M时长：04:48
时至今日，对项目架构的设计判断仍是一项极为复杂的难题，而给设计质量低下的项目“打补丁”，可能要比设计好项目更加困难。因此，你的项目架构应该保证简洁且直观，这样当有新的开发人员接手管理时，才能够在理解数据跟踪及其背后体现的 UI 路径时，不至于遇上太多无法理解的问题。
近日，工程师哈曼·阿加瓦尔（Aman Agarwal）整理出了做好前端项目架构设计的 8 个要点，以下为具体内容。
1. 组件越小，就越易于处理
将 UI 拆分成一个个小型组件，代码行（LOC）越少，我们对代码的掌控能力就越强，调试与必要时的更新也就越简单。你可以尝试通过以下方式增强项目的架构：
将公共组件移动到不同的目录当中。
将每个文件的组件容纳量限定为 2 到 3 个，且确保其中不包含公共代码组件。
尝试对组件进行概括，以便在不同的用例中反复使用。
将彼此相关的组件划分到同一个目录当中，且保证这些目录不会在目录之外的组件中使用。
2. 辅助函数应该强大且中立
辅助函数应该与渲染逻辑区分开来。仅在组件需要时使用辅助函数，且一般应该进行声明。辅助函数的作用有以下几点：
处理从服务器处接收到的数据以适应 UI 逻辑。
特定于组件逻辑。
与浏览器规范相关。
与开发人员实施的逻辑相关，其通过不同的标准以达成目标。
3. 服务是数据间的链接
我们不应直接从 UI 逻辑当中调用服务，因为如果我们需要在多个位置实现相同的 API 调用，且端点、标题等会发生变更，那么对不同位置进行服务修改将变得非常困难。下面来看如何进行服务声明：
应作为 API 调用的基本实现。
应接受配置（变量等）以作为 API 调用的必要参数进行传递。
应将从服务器处接收到的数据原样传递给调用组件。
如果使用 React 以及 Apollo，请利用 Render Props 方法构建服务组件。
4. Config 是接入服务器的关键
Config 当中包含关于应用程序运行所在环境的具体配置。请确保将配置与实际代码库拆分开来，而配置应当使用不同的文件对应不同的环境类型，并根据需要获取的不同资源类型（包括资产域、服务器 API URL 等）而有所不同。
5. 路由是保障 UI 使用体验的主要方式
路由决定着我们在 Web 应用程序当中需要实现的不同页面的 URL 格式或模式。在定义路由时，需要注意尽可能保持路由的正确顺序，以保证 UI 路径不致丢失。另外，路由的命名应该尽可能简短。
6. Static 文件是指未包含在逻辑当中的文件
Static 文件（静态文件）不同于 CSS、图像、js（很少变更）以及字体等文件，我们应该根据其类型进行分组，并尽可能降低其体积。
7. 页面代表着 Web 应用程序当中的不同目标
作为来自 NextJS 中的概念，页面目录中的目录或文件，代表着路由路径的目的地。如此一来，当我们在破译路由并拆分出组件时，就能够轻松将路由与目的地关联起来。页面应该：
仅包含路由及其它组件之间的接触点；
包含引用初始条件以引导页面的各个文件；
不包含完整逻辑，我们应该将逻辑根据功能移动至不同的组件当中；
认真进行命名，因为该文件的名称代表着 build 文件与路由组件（在使用 NextJS 的情况下）。
8. GraphQL 是从服务器当中获取数据的数据查询语言
这种查询语言的文件需要根据不同的查询与不同的文件保存在不同的目录当中。具体要求包括以下几点：
各查询应根据特定类型进行分组，且不同类型在组内对应不同的目录。
以同样的方式对变异与订阅进行分组。
应将部分查询片段从查询当中剔除，例如不同目录中的公共代码片段。
尽可能为各个查询、变异等名称保留前缀，用以区分请求不同服务器的不同 Web 应用，这样能够更轻松地区分指向不同 Web 应用程序的相同查询。
当组件当中包含或者需要文件时，请尽量将名称保留为大写形式，以确保开发人员能够轻松判断组件与查询之间的区别。
以上就是今天的主要内容，希望对你有所帮助。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论