关于前端:前端架构设计层次设计

4次阅读

共计 2152 个字符，预计需要花费 6 分钟才能阅读完成。

咱们在开发的不同阶段，形成的架构因素是不同的，基于这个思路，架构能够分为：

利用在整个零碎内的关系，如与后盾服务如何通信，与第三方零碎如何集成。在设计前端的时候，首先应该思考的，是前端零碎与其余零碎之间是怎么的关系。

这种关系蕴含，业务关系和合作机制，比方与其余前端利用之间，如何进行交互和通信。如何与后盾对接实现权限，受权，api 治理等性能。

如果与后盾通信，只须要规定与后盾数据传递的机制即可，包含 api 设计规定，拜访受权的一个凋谢规范（OAuth）跳转 token 的验证，数据传递 cookie 等。对于前端与后端的关系，咱们所思考的次要因素是前后端拆散的架构设计。

前后端拆散架构其实是如何施行技术决策，用户鉴权、API 接口治理和设计、API 文档治理、Mock 的应用、BFF(服务于前端的后端，nodejs)，是否须要服务端渲染等。所有以上决策，都须要不同团队，比方前端与后端，与产品需要分析师，与测试的一直沟通，能力一起设计出整个零碎计划。

而微前端很奥妙，在一个零碎内微前端是利用间的架构计划；在多个利用之间，微前端则是一种零碎间等架构计划。微前端是将多个前端利用以某种模式联合在一起进行利用。上面咱们来深刻理解一下，微前端。

微前端架构旨在解决单体利用在一个绝对长的时间跨度下，因为参加的人员、团队的增多、变迁，从一个一般利用演变成一个巨石利用 (Frontend Monolith) 后，随之而来的利用不可保护的问题。

这类问题在企业级 Web 利用中尤其常见，比方淘宝。阿里这么大的体系，淘宝，天猫，支付宝，一淘，淘票票，阿里云，都能够用同一个账号登陆，他们前端局部就是用的微前端，登陆这块就是一个微前端模块。

还比方，之前我负责开发大屏零碎，外面的角色权限管制模块能够独立成一个微前端，通过路由连贯主零碎；咱们在孔雀屏系统配置好大屏页面，取得一个 URL 地址，将地址用相似 iframe 的形式放到零碎页面外面展示。这其实就是一个比较简单的微前端解决方案。

这块架构的难点，在于主零碎与各个子利用的连贯形式，模块导入，子利用裸露钩子，路由配置，利用和款式隔离，js 隔离，跨域等问题的解决方案。

利用级架构能够看作是零碎级架构的细化，比方单个利用与其余内部利用的关系，微服务架构下多个利用的合作，数据交换等。因为各个利用之间，须要通过复用代码，共享组件库，对立设计等缩小工作量，因而，奥妙要思考以下几个方面内容：

脚手架。我另一篇文章前端脚手架 CLI 生成模版命令工具（包含，npm 包的公布，脚手架的搭建，注意事项，优化等）作为一个根底等模块利用，脚手架用于疾速生成搭建前端利用。它除了蕴含一个前端我的项目所需等因素，还蕴含组织外部相干等标准和模式，如部署模版，构建零碎等。一个 CLI 利用能够反对多个利用等开发，能基本的进步团队整体的工作效率。
模式库。它是一系列可复用代码合集，如前端组件，通用工具函数等，带业务或不带业务的组件。作用是多个利用之间共享代码，升高批改老本。模式库，有的只波及 UI 层面，比方 antd；有的波及业务，有的能够封装通用接口，有的蕴含多个利用通信数据库，这个就须要多方对立合作沟通，最终目标就是进步工作效率，升高开发和保护老本。
设计零碎。这个次要偏差设计人员模式，而非开发人员视角。须要 UI 有更高的视线，能力设计出有高度统一标准的 UI 标准。

这部分内容是咱们开始业务编码之前进行设计，咱们称为迭代 0，相干内容有两方面：

模块化。蕴含 css,js,html 的模块化。js 受框架的影响比拟大（vue 还是 react）；css 咱们须要设计一个正当的形式进行治理，比方全局款式的复用（antd global 款式），部分款式用于隔离，通用变量不便批改（主题色）；还须要定义 js，css，html 代码的组织形式。
组件化次要思考，如何对组件进行封装，以及组件拆分准则和粒度（思考复用性）。

真正实际操作写代码的时候，次要思考以下几个问题：