关于前端:前端领域驱动设计的一些思考

什么是 DDD

畛域驱动设计（Domain-Driven Design，简称 DDD）是一种面向对象软件设计办法，其目标是将软件系统的外围业务畛域（Domain）形象进去，并以此为根底进行设计和实现。

畛域驱动设计的核心思想是将畛域模型作为软件设计的核心，通过对畛域模型的深刻了解和设计，进步软件系统的可维护性、可扩展性和可重用性。畛域模型是形容业务畛域中重要概念、实体、关系和操作的一组对象和办法的形象示意

DDD 次要解决什么问题

DDD 旨在解决业务逻辑的复杂性，而业务逻辑大部分场景下是不存在于前端。业务逻辑往往蕴含大量的业务规定和束缚。这些业务规定通常是在后端实现的，因为后端须要解决数据的验证、解决、计算和存储等

DDD 实用于前端吗

首先下面提到了 DDD 次要解决的是简单业务场景逻辑问题，那么 DDD 是否实用于前端的一个外围因素就在于：简单的外围业务逻辑是否存在前端？

我认为是大部分状况下简单的业务逻辑是不在前端的，也就是说 DDD 大部分状况下是不适宜前端业务的

因为业务逻辑是高层级的策略，其余所有货色都依赖于它。此外，一般来说咱们须要保障业务的稳定性、可靠性、可扩展性、可维护性。如果将业务逻辑放在前端，可能会导致多端之间的数据不统一或者逻辑不同步，这可能会对用户体验和软件的可靠性造成影响

然而，咱们也不能齐全排除在前端应用 DDD 的可能性。在一些简单的利用中，前端可能须要解决一些业务逻辑，比方业务表单校验规定、权限管制规定等。在这种状况下，DDD 的一些思维和办法可能有助于组织前端代码，使其更易于了解和保护

前端是低层级细节

就电商零碎软件架构而言，前端通常被视为一个低层级的细节，相对而言较易变。因而，前端在采纳新的技术栈时绝对容易废除原有技术体系（比方咱们商家端的业务从低代码语言转换成 Pro-Code），而不是为一个新的后端语言废除原有的后端，在这里起作用的因素是稳定性和易变性。

什么是细节

细节指的是如何实现准则，也就是执行准则的形式，细节是准则的实现。要确定你正在编写的代码是准则还是细节的一种简略办法是问下本人：这段代码是否是强制执行无关我的业务畛域中规定的实现，还是只是使一些事件得以执行？

什么是策略

策略是指咱们正在编写的代码应该遵循什么样的规定和准则。次要波及在咱们编写代码的畛域中存在的业务逻辑、规定和抽象概念。

高层级策略

高层策略（high-level policy）通常指的是在应用程序中贯通各个模块和组件的外围业务逻辑和规定，这些逻辑和规定是应用程序的外围价值所在，而且通常是不会轻易扭转的。

比方，在一个电商平台中，外围的高层策略可能包含如何解决订单流程、如何计算商品最终价格、如何治理库存等等。这些规定是与具体实现无关的，而且可能须要与其余模块进行合作来实现。

将高层策略放在后端，能够确保这些规定失去了爱护和对立的执行，而且能够通过后端提供的接口和服务来保证数据和逻辑的一致性。与此同时，前端能够专一于展现和交互层面的解决，将高层策略与具体实现拆散开来，使得应用程序更容易保护和扩大。

策略和细节的关系图

在软件架构中，咱们能够将其分为两个档次（畛域和根底）

在畛域层中，咱们领有所有重要的货色：实体、业务逻辑、规定和事件。这是咱们软件中不可代替的局部，无奈简略地应用另一个库或框架代替。

而在根底层中，则蕴含了所有用于执行畛域层代码的理论实现。

前端很难具备稳定性

从上文中咱们能够晓得畛域层是具备了最高级别的稳定性和策略，这是因为畛域层蕴含了可能贴切形容你的利用零碎业务逻辑和运行形式的畛域模型代码，通常来说以后业务模型不会产生重大的变动，这意味着形容这层业务的畛域层代码也不须要进行大的变动，所以一般来说畛域层是稳定性最高的。

根据稳固依赖准则，稳固的模块是咱们能够依赖的，将不易变的模块组织成依赖于稳固模块的构造是有意义的，但永远不要让稳固模块依赖于不稳固的模块

然而，UI 层的复用性通常较差。前端 UI 须要在多样化的设计稿中进行开发，导致代码差异化无奈收敛。不同的用户心智、设计语言、业务背景、以及业务服务，都会对前端 UI 逻辑造成十分大的影响。举个例子，不同业务线的后端服务申请响应数据结构差异化可能间接导致数据处理逻辑无奈复用。在一些 C 端场景中，这种状况尤为突出，比方电商、社交等。

针对面向 B 端的前端，目前业界曾经有了一些罕用的组件库，例如 Antd、Fusion、MerlionUI 等等。这些组件库曾经具备了高稳定性，即它们曾经定义了 B 端前端的根底组件规范和根底层，大部分状况下不会进行大的变更。然而，因为 B 端业务场景的差异性，前端在 UI 层上仍须要大量的业务组件和视图层的工作量。例如，在电商网站下单的订单模型中，面向买家用户时展现的是以买家用户为核心的订单解决状态和履约进度信息，而在面向卖家用户时则须要展现对这笔订单的状态流转的规范操作流程。

前端很难复合开闭准则

通常而言当须要更改某个性能时，前端开发人员通常须要间接批改代码，而不是增加新的性能或模块。假如咱们在开发一个商品详情组件，可能须要展现商品的名称、价格、形容、图片、评论等信息。这些信息是所有商品都须要展现的，所以能够将它们定义为稳固层的外围规定逻辑。

然而，在不同的业务场景中，可能须要对商品信息页面进行一些定制化的展现，比方在大促流动期间须要展现大促标签和气氛图，或者在跨境电商业务中须要展现关税和物流信息，再或者当咱们商品详情展现在不同国家和地区的时候商品名称和价格的地位会发生变化，而这些业务规定属于易变的低层级细节，然而往往在业务量比拟小、低层级的业务规定没法暗藏到稳固层的时候，这部分工作量往往就会落在前端身上，最初前端视图层和业务组件层会有大量的业务规定逻辑判断。通常而言这种形式违反了开闭准则，因为它须要批改现有的代码来实现新的性能，而不是扩大功能模块，这就是因为咱们将所有高层级策略放在后端并确保前端不蕴含高层级策略时所做的工作。

在这种状况下，前端能够通过配置文件或者经营控制台等形式来配置这些低层级细节规定，而稳固层的商品信息组件能够通过这些配置来实现不同的业务场景的展现需要。

前端业务复杂度次要在哪

前端业务复杂度次要包含但不限于技术栈的复杂度、业务逻辑的复杂度、UI 交互的复杂度等。

技术栈的复杂度在哪

通常而言咱们所说的前端技术栈泛指：Vue、React、Angular、JQuery 等基于 MVVM、操作 DOM 的技术栈。

为什么这么说？因为前端框架其实实质上是高策略层级的，每个前端框架的个别都是来解决以下问题：

• 定义状态（data、state）
• 状态变化检测（Object.defineProperty、Proxy、React reconcilliation）
• 对状态更改做出反馈（Observable、hooks、单向数据流）

所以当你抉择好一个框架之后，其实你就曾经是在这个高层级策略上面执行低层级细节的编码。举个例子 Vue 和 React 实现状态变化检测和 Reactive 的策略是不一样的，对于开发者而言在这个策略下的理论编码思维也是差别微小的，Vue 是基于 Proxy 来做双向绑定，而 React 是基于调度更新算法来更新 vdom 树

React 带给咱们的编程范式是函数式编程 *（函数式编程 Functional Programming 是一种编程范式，它的核心思想是应用纯函数来进行编程），当咱们抉择了 React 这套 UI 框架和生态之后，咱们人造写进去的代码就是基于函数式的。为什么是函数式的？背地的起因实际上是因为 React 原生的响应计划，也就是监测变量援用（reference）的变动，而后整个子树去协调更新。

函数式编程具备几个特点 *：纯函数、不可变性、函数组合。React 响应计划因为要保障在输出 (props) 是统一的状况下，输入 (vdom) 的后果也是统一的。所以咱们对 React 状态逻辑的封装大部分也须要满足这个个性，这也是为什么咱们在组件外部要通过 setState() 而不是 state.xxx 来变更状态，这也就是咱们通常所说的 状态不可变性。

另外函数式编程又帮咱们解决了组件的之前的组合问题，一般来讲咱们基于 React 来开发页面的模式个别是：Page = Compose(ComponentA + ComponentB + Fusion/Antd) 而 Component = Compose(Fusion/Antd + React hooks + Events + State) 而这种组合的个性在业务层如果没有一个比拟好的组件依赖准则的话，会导致组件之间耦合比较严重，又因为组件外部的复杂度也是 compose 的各种“组件”，所以当零碎内的各种 ” 组件 ” 的依赖关系越来越简单的时候，甚至“组件”之间的依赖呈现环的时候，业务零碎的复杂度就跟着线性递增了

总结一下在业务前端利用中技术栈的复杂度次要体现在以下方面：

• 组件和模块的组织：在组件化和模块化设计中，如何组织组件和模块，使得它们的依赖关系正当、清晰，以保障代码的可维护性和可扩展性。
• 状态逻辑的组织和治理：在大型前端利用中，状态治理是一个重要的问题。状态治理须要思考状态的一致性和可变性，以及如何解决状态的变动。
• 异步数据处理：古代前端利用须要解决大量的异步数据申请和解决。异步数据处理须要思考异步数据的申请和响应、数据缓存、数据更新和状态治理等问题。

业务逻辑的复杂度

业务逻辑的复杂度通常来自于业务需要自身，例如业务规定、流程、数据处理等。业务逻辑的复杂度可能因业务畛域的不同而有所不同，例如电商、本地生存、直播等畛域都有各自的业务逻辑和复杂性。

在前端开发中，业务逻辑复杂度可能体现为须要进行大量的数据处理、业务规定的验证、简单的页面流程设计等。在前端中，如果没有一个清晰的业务逻辑划分和形象，代码可能会变得非常复杂，难以保护和扩大。因而，在前端开发中，对于业务逻辑的划分和形象十分重要，这样能力更好地应答业务逻辑的变动和复杂性。

UI 交互的复杂度

UI 交互的复杂度次要在于如何实现简单的交互逻辑和动画成果，以及如何解决用户的输出和反馈。具体来说，UI 交互的复杂度次要体现在：用户体验设计、跨端兼容性、性能优化

怎么升高前端业务复杂度

这里咱们次要重点关注怎么升高技术栈和业务逻辑的复杂性带来的复杂度。

文章的结尾咱们讲了，畛域驱动设计的次要目标是为了解决业务逻辑的复杂性。畛域驱动设计的核心思想是将畛域模型作为咱们业务架构设计的核心，实际上来说咱们只是须要借助畛域驱动设计的一些思维在前端业务开发中进行实际，后面提到在咱们前端业务工程会呈现大量不满足组件构建的无依赖环准则，这里次要的起因是因为前端开发者在以 UI 层为核心进行开发，而如果咱们切换视角以 ViewModel、Model 为核心来构建咱们的前端业务的话，整体零碎设计思路会发生变化

畛域模型

大部分前端代码与理论业务畛域无关，这部分前端次要专一在表单验证、API 申请、事件响应、列表渲染等等，然而也有局部业务的前端也确确实实跟业务畛域相干，畛域业务模型也的确会影响到 UI 层。畛域模型通常是一组具备业务含意的类或者对象，它们通过办法、属性等形式封装了零碎的要害业务逻辑。无论如何，只有它能被零碎中的其余不同利用复用就能够。

通常来说咱们能够通过手动创立或者形象工厂办法结构出模型数据，把这些数据响应式地映射到视图层，再依据视图层触发的事件调用模型层里的函数或办法来更新模型层数据。

状态治理

状态治理次要分两个局部：一个是治理对业务模型层的可变状态和不可变状态，一个治理视图层的可变状态和不可变状态。

视图层上有些状态不是从模型层数据里来的，是纯正的页面状态，比方数据正在加载的标记、下拉框的联动，等等，这些和模型层无关，且随着需要的变动而动态变化。

在基于 React 渲染计划中，咱们既能够利用 React 原生的响应计划也能够借助三方库 (mobx) 的计划来实现这部分状态治理，抉择的计划不同可能会带来在编程范式的差别（FP、OOP）

视图层

视图层是最不稳固的一层，UI 组件的实现通常受到业务需要的影响，随着需要的变动，UI 组件的实现也须要进行相应的调整和变更。同时，为了放弃软件的稳定性和可维护性，须要遵循稳固依赖准则，确保其余根底组件不会依赖于视图层。

基于 React 的视图层又会有随同着事件响应、生命周期等等副作用。Hooks 实际上只是视图层的货色，背地都是依赖于 React 的响应原理，因而，在我看来，Hooks 会通过合并同类项进入视图层。

架构分层

首先，在互联网行业中，很难一开始就实现完满的零碎设计。相同，零碎往往须要逐渐倒退，通过一直迭代和引入新的功能模块来逐渐成型。对于现有零碎，通过一次大规模的重构难以解决所有问题。好的零碎设计须要一直投入工作并逐渐积攒细节，最终能力取得欠缺的零碎。因而，在日常工作中须要高度重视设计和细节改良。

其次，专业化分工和代码复用是进步软件生产率的重要伎俩，此外，同一畛域服务能够反对不同的下层应用逻辑。这种分工和复用背地的思维是将零碎分为多个程度层，并明确定义每个层的角色和工作，以升高单个层的复杂性。同时，每个层只需向相邻层提供统一的接口，能够应用不同的办法进行实现，这为软件重用提供了反对。因而，分层是解决复杂性问题的重要准则。

计划一

在这个计划中咱们视图层跟模型层的之间的接口是通过 ViewModel 来进行治理，视图层依赖 Hooks 和 ViewModel 来进行生命周期、事件、响应计划，而 ViewModel 中既蕴含以后视图层本身的状态治理也耦合畛域服务和畛域模型，这个架构设计中不稳固层蕴含：View、Hooks、Lifecycle、ViewModel，而稳固层蕴含：Service、Repository、Model。

计划二

在这个计划中咱们视图层跟模型层的之间是间接依赖关系，视图层间接依赖 Hooks、Model、State。这个架构设计中不稳固层蕴含：View、Hooks、Lifecycle、State、Model，而稳固层蕴含：Service、Repository。

文件目录设计

咱们根据上述结构图的分层思维，在理论我的项目中定义了以下的文件目录：

├── shared
│   ├── components // 专用根底组件, 组件之间不能相互耦合
│   ├── constants // 全局变量
│   │   ├── page.ts
│   ├── domains // 畛域层
│   │   ├── page
│   │   │   ├── page.model.ts // 实体
│   │   │   └── page.service.ts // 畛域 Service 服务
│   │   ├── ...
│   └── util // 专用函数
│       └── http.ts
├── components // 公共业务组件，业务组件之间不能相互耦合，然而能够依赖公共根底组件
├── modules // 模块视图，模块能够是 compose(公共业务组件, 公共根底组件)
└── page // 页面视图层
    ├── index
    │   ├── index.tsx
    │   ├── components
    ├── ...

常见问题

问题一：Modules 跟 Components 的辨别实际上过于理想化，失常业务开发，很可能不好判断我以后这个组件是要放 Modules 还是 Components 外面，甚至使用者都会纳闷我到底是要去 Modules 外面去找还是去 Components 去找

Module = compose(ComponentA + ComponentB + ComponentC)。如果 ModuleA 只是一个非凡的 ComponentA，就放到 component 外面，模块外面不耦合太多业务逻辑，纯正的 View 层的 compose。只是这个模块须要被多个页面援用，比方: PageA = compose(ModuleA + ComponentD + PageA logic) PageB = compose(ModuleA + ComponentC + ComponentB + Hooks)

问题二：那你的 Components 的颗粒度到底是多细呢？我的 Components 外面的 Component 能援用其余的 Component 吗？

不行，关注点拆散，架构分层，就是要让依赖树足够清晰，Component 能够依赖 shared/components 也能够依赖 Fusion + MerlionUI，然而 components 之间最好不要相互耦合

在具体抉择计划时，须要思考业务场景的差别，简略的业务属性要警觉把问题复杂化，警觉适度设计，简单的业务要全面评估和判断好计划，抉择适宜本人的设计方案。

另外两种设计方案中不稳固层并不意味着这是一个强耦合层，不稳固只是代表这一层中的构造会随着业务的变更而频繁变更，咱们须要依据业务场景来判断哪些局部须要转化为稳固层，并确保依赖关系构造的清晰和整洁。

总结

依据上文推导过程可知，如果咱们要在前端业务工程上深度应用领域驱动设计的思维来实际最好须要几个前提

• 前提一：开发者须要站在畛域模型层为核心的视角来进行零碎设计
• 前提二：开发者须要对业务畛域模型足够了解，前后端的业务畛域模型要对齐
• 前提三：后端能提供业务畛域的标准化 CRUD 接口

写在最初：尽管技术在软件开发中表演了重要的角色，但任何技术都不是银弹，作为工程师、架构师，咱们须要对技术选型、架构设计、零碎设计进行三思而行，并进行全面的评估和判断。

原文链接

本文为阿里云原创内容，未经容许不得转载。