frontend-angular.md

前端代码分层

• 分层设计

  • API 层：以 ng 的 Service 体现，根据后端的 API 划分，负责发送 Socket 消息、Rest 请求。以后可以根据 swagger 生成该层。
  • Business 层: 以 ng 的 Service 体现，根据领域资源或者独立的职责划分, 处理具体业务逻辑，与场景无关，提供通用的方法和全局状态。
    • 全局的兜底错误处理
  • Page 层：以 ng 的 Component 体现，复杂业务可以增加 PageServcie，负责当前业务逻辑和当前路由的局部状态。PageService 可选和 PageComponent 一一对应，如果简单业务可以直接将 PageService 和 PageComponent 合并。
    • 局部的错误处理
    • 数据整理，如格式化过滤等

• 组件设计，组件分为：Page 组件、业务组件、UI 组件

  • Page 组件负责承载路由，每个路由必须对应一个 Page 组件
  • 当 Page 组件过大时，可以拆分为业务组件，例如弹窗，业务组件的数据输入必须来自于 Page 组件。业务组件最多两层。避免依赖 service 和其中的数据。
  • UI 组件为无状态、可复用的纯交互组件，通过事件和 input 做数据通信。禁止依赖 service 和其中的数据。

• 路由设计

  • 路由层级不超过 3 层

• Rxjs

  • 不使用 promise
  • 及时取消订阅

命名和风格

• 文件夹必须使用中横线命名，不使用驼峰
• svg 文件需要使用 svgo 做处理，然后修改 fill 属性为 currentColor 满足 css 颜色要求
• 避免在 targetUri 中使用 %

样式规范

• 所有颜色必须使用设计系统中的值
• 不使用 important
• 不使用行内样式
• 嵌套层次不超过 3 层
• 字重 font-weight 先不要用纯数字，直接使用 bold or normal

其他规范

• 无用代码应该直接删除,不要直接注释后提交到代码库