简介

本文档内容来自蚂蚁集团体验技术部的蚂蚁链前端合作开发时的《外部 ISV 前端研发规范建议》，我们直接引用过来作为朗思企业新的前端技术规范要求。

适用范围

本规范适用于规范新立项开发应用软件系统管理平台和管理中台。不适用于以下三种场景：

  • 尚未确定彻底变更前端技术路线的既有应用系统
  • 面向个人用户的网页 / 网站应用程序
  • Hybrid模式开发的手机App
  • 微信小程序开发
  • 微信公众号二次开发（HTML 5页面）

技术栈规范

技术栈要求使用 umi、Ant Design、ProComponents（Ant Design Pro），并及时保持更新。

代码质量规范

大部分规范都在 Ant Design Pro V5 中得以体现，可以参考其实现。

具体的要求见《JavaScript 编码规则》和《Airbnb JavaScript 风格指南》。

正确的使用 TypeScript和JavaScript

要求正确掌握 TypeScript 的研发，通过 TypeScript 的类型定义让代码具有更强的健壮性和可读性，也让研发效率更高。如果使用JavaScript开发，需要符合ECMAScript 6标准（参见《ECMAScript 6要点》

高质量的组件化组织代码并学会利用 hooks 来封装逻辑

要避免冗长的重复的代码，学会合理的将页面组件化。另外推荐使用 Function Components + Hooks 的方式来研发，废弃的 Class Component 的方式，通过 Hooks 来封装逻辑。基础的组件尽可能使用 Ant Design 和 ProComponents，图表使用 Ant Design Charts 等 AntV 体系的方案，基础的 Hooks 尽可能使用 ahooks（尤其是 useRequest），如果有不满足的需求可以反馈给社区，避免重复建设和魔改。

跟进 umi 最佳实践方案

umi 提供了权限、布局、数据共享等一系列的最佳实践，需要及时的保持跟进和不断的迭代升级。

设计规范

设计规范基于 Ant Design，前端使用 antd 组件和 ProComponents 组件。

开发工具

使用Visual Studio Code作为主要的前端开发工具（参见About Visual Studio Code）。

持续的优化和重构

项目要持续的保持优化，这样才能让项目充满活力，在不断新增的需求下可以保持高质量的代码，让项目更好维护和扩展。这里列举一些常见的点，你可以对照检查你的项目进行优化：

  • 删除没有用的代码。代码如果已经没有用了建议删除，不要直接注释，避免给其它人带来疑惑，如果需要保留那请注释具体的原因和说明。
  • 合格的 README.md 要能让新接手的开发者方便快速掌握研发全流程，应包含从环境搭建到部署所涉及的相关资源。
  • 尽可能的升级各种场景的解决方案为 umi 的内置方案。比如数据流、权限、布局 等 umi 都提供了最佳实践。
  • 持续升级技术栈，比如 umi3、antd4、Ant Design Charts 1.0 等。
  • 消灭警告和错误，包括控制台警告、Lint 问题、TypeScript/JavaScript 定义等问题。
  • 合理的抽象业务组件，组织代码结构（参考 Ant Design Pro 最新 V5 版本）。

参考