如何设计一个好的前端架构

前言

什么时候好的前端架构,就是当有新的开发人员接触项目是,不会在理解数据跟踪及其背后体现的UI路径时不至遇上太多的问题。

什么样式好的架构

  • 易于管理
  • 方便理解
  • 规划清晰
  • 更新便捷
  • 组件化程度高
  • 流程方便

页面

页面代表着web应用中不同的目标,页面目录中的文件或者目录,代表着路由路径的目的地。这样,当我们通过路由并拆分出组件时,就能够便捷的径路与页面文件关联起来。
* 仅包含路由入口文件以及其所需要组建的关联
* 入口文件不应该包含完整逻辑,应该见逻辑根据功能拆分至不同的组件
* 规范命名,因为该文件代表着打包后的文件与路由组件

组件

组件越小,就越易于处理。将UI拆分成一个个小的组件。代码越少,我们对代码的掌控能力就越强,调试与必要时的更新就会越简单。可以通过以下方式:
* 将公共组件统一放到一个目录中
* 将每个文件的组件进行分类,确保其中不包含公共代码组件
* 尝试对组件进行概括,以便以后能在不同的场景中使用
* 将彼此相关的组件划分在一起。确保这些组件不会在目录之外的组件中使用

辅助函数

辅助函数应该强大且中立,辅助函数应该与渲染逻辑区分开,仅在需要使用的时候引用。其作用在于:
* 处理特定组件的逻辑
* 与浏览器规范相关
* 处理从后端接收到的数据,使其适用于业务
* 将公共的辅助函数划分到一起,便于管理

API服务

API服务是指负责在参数特定的情况下,调用服务器以获取数据的代码。我们不应该直接从UI逻辑中调用服务。因为如果我们需要在很多位置实现相同的API调用,name对不同位置进行修改迭代将变得非常困难。
* 应该将API服务进行封装,单独做一个服务来实现
* 应将从服务器接收的数据直接返回给组件
* 应该能接收配置或者变量等,作为API服务的必要参数进行传递

Config

Config 当中应包含web应用运行所在的环境具体配置。确保将配置与实际代码拆分出来。
* 使用不同的文件对应不同的环境类型
* 根据获取不同的资源类型而有所不同

路由

路由是保障web应用使用体验的主要方式,路由决定这我们在应用中需要显示的不同页面的URL格式或者模式。
* 路由的命名应该尽可能简短
* 尽可能保持路由的正确顺序

Static文件

Static文件是指未包含在逻辑当中的文件。
* 应该根据其类型进行分组
* 尽可能降低文件体积

其他

  • 如果是在用npm管理的话,package.json 应该有完善的相关命令,来保证开发人员流程畅通
  • readme 要写的足够详尽,因为一个开发如果要想了解一个项目的话,都会先阅读readme

以上就是我总结的一些想法,现在前端发展迅速,整个设局对于项目架构的思路也是日新月异,我只是希望我写的这些能起到一些帮助。