前端分层架构实战：DDD 与 Clean Architecture 落地实践

前端分层架构实战：DDD 与 Clean Architecture 落地实践 | 极客日志

层级	前端落地场景	核心职责
UI 层	Vue / React 组件、UI 库（如 Element Plus）	渲染用户界面、响应输入操作，是用户与系统交互的入口与结果载体
控制层	组件交互逻辑（如 Vue 的 Composition API、React 的自定义 Hooks）	管理事件流、绑定视图与业务模型、解析数据，承担'用户操作→业务逻辑'的调度
领域层	TypeScript 业务模型、业务函数	封装业务规则：用'实体 / 值对象'定义业务概念，用'服务'实现业务操作
基础层	工具库（axios、localStorage 等）	提供 API 请求、持久化存储、导出工具等通用技术能力，支撑上层业务

<!-- 拦截池列表组件 -->
<template>
  <el-table :data="ruleList" border>
    <el-table-column prop="name" label="规则名称"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button @click="handleEdit(scope.row.id)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { useInterceptionPoolController } from './controller';
const { ruleList, getRuleList, loading } = useInterceptionPoolController();
const emit = defineEmits(['openEditModal']);
// 仅触发业务操作，不处理逻辑
const handleEdit = (id: string) => emit('openEditModal', id);
// 组件挂载时触发查询
onMounted(() => getRuleList());
</script>

// 拦截池交互逻辑（Vue Composition API）
import { ref } from 'vue';
import { InterceptionPoolUseCase } from './usecase';

export function useInterceptionPoolController() {
  const loading = ref(false);
  const usecase = new InterceptionPoolUseCase();

  // 调度业务逻辑，处理视图状态
  const getRuleList = async () => {
    loading.value = true;
    await usecase.getList();
    loading.value = false;
  };

  return { loading, getRuleList, ruleList: usecase.ruleList };
}

// 实体：拦截规则（封装业务规则）
export class InterceptionRule {
  constructor(
    public id: string,
    public name: string,
    public condition: string
  ) {
    // 业务规则：规则名称不能为空
    if (!name.trim()) throw new Error('规则名称不可为空');
  }
}

// 服务：拦截池业务操作
export class InterceptionPoolService {
  // 业务逻辑：过滤已过期的规则
  filterExpiredRules(rules: InterceptionRule[]): InterceptionRule[] {
    return rules.filter(rule => rule.condition.includes('expire:false'));
  }
}

// API 请求工具
import axios from 'axios';

export class ApiRepository {
  async get<T>(url: string, params: Record<string, any>): Promise<T> {
    const res = await axios.get(url, { params });
    return res.data;
  }
}

方案类型	核心优势	核心劣势	前端适配性	改造成本
Vue / React + Remesh	遵循 DDD、支持 CQRS / 事件驱动	代码繁琐、异步交互复杂、需升级框架 / 适配	中（需框架适配）	高（框架升级 + 思维重构）
Vue + BLL 架构	事件驱动、无需升级框架	UI 与业务逻辑易混淆	高（无需升级）	中（需适配事件驱动思维）
Vue / React + Clean Architecture	框架无关、易测试、分层清晰	存在模板代码、学习曲线较陡	高（轻量适配）	低（轻量改造，核心逻辑复用）

层次	前端实现内容	代码示例
实体层（Entities）	TypeScript 业务模型 + 规则	`class InterceptionRule { /* 业务规则校验 */ }`
用例层（Use Cases）	业务操作函数	`async getInterceptionRules() { /* 调用 API+ 业务逻辑 */ }`
接口适配器层（Repositories / Presenters）	数据格式转换、API 封装	`const mapRule = (raw: RawRule) => ({ id: raw.rule_id, name: raw.rule_name })`
框架驱动层（Device / DB / API / UI）	Vue / React 组件、UI 库、axios	`<el-table :data="ruleList" />`

用户操作组件 → Controller（交互调度） → UseCase（业务逻辑） → Repository（API 请求） → 接口数据 → UseCase（业务处理） → UI 组件（渲染）

View ← Presenter ← UseCase ← Repositories ← Model

├── modules
│   ├── exception-flow # 业务场景：异常流程
│   │   └── interception-pool # 模块名：拦截池
│   │       ├── components # UI 层：模块内组件（对应框架驱动层）
│   │       ├── model # 实体层：业务模型（Entity / Service）
│   │       │   └── interception-pool.ts # 拦截规则实体 + 服务
│   │       ├── repository # 接口适配器层：API 封装 + 数据转换
│   │       │   ├── interception-pool.ts # API 请求方法
│   │       │   └── types.ts # 接口类型定义
│   │       ├── usecase # 用例层：业务操作（对应图 2）
│   │       │   ├── interception-pool.ts # 通用用例
│   │       │   ├── interception-pool-for-sip.ts # Sip 仓扩展用例
│   │       │   └── usecase-factory.ts # 用例工厂（映射场景）
│   │       ├── controller.ts # 控制层：交互逻辑调度
│   │       ├── index.vue # 模块入口：组装组件与逻辑
│   │       └── README.md # 模块使用文档

// model/interception-pool.ts
// 1. Entity：后端接口返回的原始类型（与 API 协议一致）
export interface InterceptionRuleEntity {
  rule_id: string;   // 后端字段：规则 ID
  rule_name: string; // 后端字段：规则名称
  rule_condition: string; // 后端字段：规则条件
  expire_flag: string; // 后端字段：过期标识
}

// 2. Model：前端 UI 使用的类型（适配组件展示）
export interface InterceptionRuleModel {
  id: string;        // 前端字段：规则 ID（统一命名）
  name: string;      // 前端字段：规则名称
  condition: string; // 前端字段：规则条件
  isExpired: boolean;// 前端字段：是否过期（布尔值，便于 UI 判断）
}

// 3. 数据转换函数（Entity → Model）
export const mapRuleEntityToModel = (entity: InterceptionRuleEntity): InterceptionRuleModel => ({
  id: entity.rule_id,
  name: entity.rule_name,
  condition: entity.rule_condition,
  isExpired: entity.expire_flag === 'true'
});

// repository/interception-pool.ts
import axios from 'axios';
import { InterceptionRuleEntity, InterceptionRuleModel, mapRuleEntityToModel } from '../model/interception-pool';

// 接口参数类型
export interface QueryInterceptionRulesParams {
  pageNum: number;
  pageSize: number;
  type?: string; // 规则类型（如 sip 仓/普通仓）
}

export class InterceptionPoolRepository {
  // 基础 URL
  private baseUrl = '/api/interception-rules';

  // 查询拦截规则列表
  async queryRules(params: QueryInterceptionRulesParams): Promise<InterceptionRuleModel[]> {
    try {
      // 1. 格式化请求参数（统一分页参数命名）
      const formattedParams = {
        page_num: params.pageNum,
        page_size: params.pageSize,
        type: params.type
      };

      // 2. 发送 API 请求
      const res = await axios.get<InterceptionRuleEntity[]>(this.baseUrl, { params: formattedParams });

      // 3. 转换数据格式（Entity → Model）
      return res.data.map(mapRuleEntityToModel);
    } catch (error) {
      // 4. 统一异常处理
      console.error('查询拦截规则失败：', error);
      throw new Error('查询拦截规则失败，请重试');
    }
  }

  // 创建拦截规则
  async createRule(rule: Omit<InterceptionRuleModel, 'id'>): Promise<void> {
    // 转换 Model → Entity（适配后端接口）
    const entity = {
      rule_name: rule.name,
      rule_condition: rule.condition,
      expire_flag: rule.isExpired ? 'true' : 'false'
    };
    await axios.post(this.baseUrl, entity);
  }
}

// usecase/interception-pool.ts
// 对应类图中的「InterceptionPoolUseCase」抽象接口
export interface InterceptionPoolUseCase {
  /**
   * 处理请求参数（共性/个性参数格式化）
   * @param params 前端传入的原始参数
   * @returns 格式化后的接口请求参数
   */
  processParams(params: any): any;

  /**
   * 获取拦截规则列表（核心业务操作）
   * @param params 前端传入的查询参数
   * @returns 处理后的 UI 模型列表
   */
  getList(params: any): Promise<InterceptionRuleModel[]>;
}

// 对应类图中的「DefaultUseCase」
export class DefaultInterceptionPoolUseCase implements InterceptionPoolUseCase {
  // 对应类图中的「+repository: Repository」：依赖 Repository 层
  protected repository: InterceptionPoolRepository;

  constructor() {
    this.repository = new InterceptionPoolRepository();
  }

  /**
   * 通用参数处理：格式化分页/通用筛选条件
   * 对应类图中的「+processParams」
   */
  processParams(params: any): any {
    // 共性逻辑：统一分页参数命名（前端 page→后端 page_num）
    return {
      page_num: params.page || 1,
      page_size: params.pageSize || 10,
      keyword: params.keyword || ''
    };
  }

  /**
   * 通用列表查询：参数处理→调用接口→数据转换→基础业务逻辑
   * 对应类图中的「+getList」
   */
  async getList(params: any): Promise<InterceptionRuleModel[]> {
    try {
      // 步骤 1：调用通用参数处理
      const formattedParams = this.processParams(params);

      // 步骤 2：调用 Repository 层获取接口数据
      const ruleModels = await this.repository.queryRules(formattedParams);

      // 步骤 3：通用业务逻辑：过滤空名称的无效规则
      return ruleModels.filter(rule => rule.name.trim());
    } catch (error) {
      // 共性异常处理：统一业务层面的错误提示
      console.error('获取拦截规则列表失败（通用逻辑）：', error);
      throw new Error('查询规则失败，请检查网络后重试');
    }
  }
}

// 对应类图中的「SipWhUseCase」
export class SipWhUseCase extends DefaultInterceptionPoolUseCase {
  /**
   * 重写参数处理：添加 Sip 仓专属筛选条件
   * 对应类图中的「+ processParams」（重写）
   */
  processParams(params: any): any {
    // 复用父类的通用参数处理逻辑
    const baseParams = super.processParams(params);
    // 个性化逻辑：强制添加「type: 'sip'」的筛选条件
    return { ...baseParams, rule_type: 'sip' }; // Sip 仓专属参数
  }

  /**
   * 重写列表查询：补充 Sip 仓专属业务逻辑
   * 对应类图中的「+ getList」（扩展）
   */
  async getList(params: any): Promise<InterceptionRuleModel[]> {
    try {
      // 复用父类的「参数处理 → 接口调用 → 基础过滤」逻辑
      const baseRules = await super.getList(params);
      // 个性化业务逻辑：过滤 Sip 仓的跨境规则
      return baseRules.filter(rule => !rule.condition.includes('cross_border: true'));
    } catch (error) {
      // 个性化异常提示：区分 Sip 仓场景的错误
      console.error('获取 Sip 仓拦截规则失败：', error);
      throw new Error('Sip 仓规则查询失败，请联系管理员');
    }
  }
}

// usecase/usecase-factory.ts
export class InterceptionPoolUseCaseFactory {
  /**
   * 根据场景类型创建对应的 UseCase 实例
   * @param scene 业务场景（default/sip）
   * @returns 对应场景的 UseCase 实例
   */
  static create(scene: 'default' | 'sip'): InterceptionPoolUseCase {
    switch (scene) {
      case 'sip':
        return new SipWhUseCase(); // 场景对应 Sip 仓 UseCase
      default:
        return new DefaultInterceptionPoolUseCase(); // 默认对应通用 UseCase
    }
  }
}

// controller.ts
import { InterceptionPoolUseCaseFactory } from './usecase/usecase-factory';

export function useInterceptionPoolController(scene: 'default' | 'sip' = 'default') {
  const loading = ref(false);
  // 通过工厂获取对应场景的 UseCase 实例
  const usecase = InterceptionPoolUseCaseFactory.create(scene);
  const ruleList = ref<InterceptionRuleModel[]>([]);

  const getRuleList = async (params: any) => {
    loading.value = true;
    try {
      // 调用 UseCase 的 getList 方法（不同场景自动适配逻辑）
      ruleList.value = await usecase.getList(params);
    } finally {
      loading.value = false;
    }
  };

  return { loading, ruleList, getRuleList };
}

对比维度	4.2 Repository 层（接口适配器层）	4.4 Presenter 层（展示适配器层）
核心适配目标	后端接口原始数据 → 前端通用业务 Model	前端通用业务 Model → 前端组件专属 View Model
数据转换阶段	'接口请求后，业务逻辑处理前'的转换	'业务逻辑处理后，UI 渲染前'的最终转换
数据处理维度	结构 / 命名适配（如后端 rule_id → 前端 id）、数据类型转换（如字符串标识 → 布尔值）、屏蔽后端协议差异	展示格式适配（如时间戳 → YYYY-MM-DD）、展示字段拼接（如姓名 + 工号）、贴合 UI 组件的个性化数据处理
职责边界	聚焦'前端与后端的接口通信解耦'，转换后的数据可在全项目多组件复用	聚焦'业务逻辑与 UI 展示的解耦'，转换后的数据仅在当前组件 / 页面复用
依赖关系	依赖后端接口协议，向上为 UseCase 层提供统一数据	依赖前端 UI 组件需求，向下从 UseCase 层获取业务数据
异常处理	包含接口请求异常、数据格式异常的统一处理	无异常处理，仅做纯数据格式 / 展示逻辑的转换

<!-- components/InterceptionRuleList.vue 拦截池规则列表组件 -->
<template>
  <el-table :data="viewRuleList" border stripe>
    <el-table-column prop="id" label="规则 ID" width="100"/>
    <el-table-column prop="name" label="规则名称">
      <!-- 展示适配：根据是否过期标红 -->
      <template #default="scope">
        <span :class="{ 'text-red-500': scope.row.isExpired }">{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <!-- 展示适配：将原始条件字符串格式化为易读文本 -->
    <el-table-column label="规则条件">
      <template #default="scope">{{ formatCondition(scope.row.condition) }}</template>
    </el-table-column>
    <el-table-column prop="createTimeFormat" label="创建时间" width="180"/>
  </el-table>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useInterceptionPoolController } from '../controller';

// 从控制层获取 UseCase 处理后的通用业务 Model
const { ruleList } = useInterceptionPoolController('default');

// Presenter 层核心职责：Model → View Model（轻量展示适配，嵌入 UI 层）
// 1. 时间戳格式化：业务 Model 中是时间戳，View Model 中是格式化后的字符串
const viewRuleList = computed(() =>
  ruleList.value.map(rule => ({
    ...rule,
    // 继承通用业务 Model 的所有字段
    createTimeFormat: new Date(rule.createTime).toLocaleString('zh-CN') // 展示专属字段
  }))
);

// 2. 规则条件格式化：将后端原始字符串转换为易读文本（纯展示逻辑，与业务无关）
const formatCondition = (condition: string): string => {
  if (!condition) return '无规则条件';
  // 仅做展示格式转换，不涉及任何业务逻辑判断
  return condition.replace(/&/g, '，').replace(/=/g, '：');
};
</script>
<style scoped>
.text-red-500 { color: #ef4444; }
</style>

// interception-pool/presenter-utils.ts 仅做展示适配的工具函数（Presenter 层职责）
import { InterceptionRuleModel } from '../model/interception-pool';

// 定义组件专属的 View Model（仅服务于渲染，无任何业务字段）
export interface InterceptionRuleViewModel {
  id: string;
  name: string;
  nameTag: string; // 展示专属：规则名称 + 过期标签（如'测试规则 [已过期]'）
  conditionDesc: string; // 展示专属：格式化后的规则条件
  createTime: string; // 展示专属：格式化后的创建时间
  operateBtnStatus: boolean; // 展示专属：操作按钮是否禁用（根据过期状态）
}

// Presenter 核心方法：Model → View Model（纯展示适配，无业务逻辑）
export const mapRuleModelToViewModel = (model: InterceptionRuleModel): InterceptionRuleViewModel => {
  // 展示适配 1：名称拼接过期标签
  const nameTag = model.isExpired ? `${model.name}[已过期]` : model.name;
  // 展示适配 2：规则条件格式化
  const conditionDesc = model.condition ? model.condition.replace(/&/g, '，').replace(/=/g, '：') : '无规则条件';
  // 展示适配 3：格式化创建时间
  const createTime = new Date(model.createTime).toLocaleString('zh-CN');
  // 展示适配 4：根据过期状态判断操作按钮是否禁用
  const operateBtnStatus = model.isExpired;

  return {
    id: model.id,
    name: model.name,
    nameTag,
    conditionDesc,
    createTime,
    operateBtnStatus
  };
};

<!-- components/InterceptionRuleList.vue -->
<template>
  <el-table :data="viewRuleList" border stripe>
    <el-table-column prop="nameTag" label="规则名称"/>
    <el-table-column prop="conditionDesc" label="规则条件"/>
    <el-table-column prop="createTime" label="创建时间"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button :disabled="scope.row.operateBtnStatus" @click="handleEdit(scope.row.id)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { useInterceptionPoolController } from '../controller';

// 引入 Presenter 工具函数
import { mapRuleModelToViewModel, InterceptionRuleViewModel } from './presenter-utils';

const { ruleList } = useInterceptionPoolController('default');

// 统一做 Model → View Model 的转换
const viewRuleList = computed<InterceptionRuleViewModel[]>(() =>
  ruleList.value.map(model => mapRuleModelToViewModel(model))
);
</script>

// src/common/presenter/format-utils.ts 全局展示适配工具

/**
 * 时间戳格式化（全局通用展示适配）
 * @param timestamp 时间戳（业务 Model 通用字段）
 * @param format 格式化类型
 * @returns 格式化后的时间字符串（View Model 展示字段）
 */
export const formatTimestamp = (timestamp: number, format: 'date' | 'datetime' = 'datetime'): string => {
  if (!timestamp) return '-';
  const date = new Date(timestamp);
  const y = date.getFullYear();
  const m = (date.getMonth() + 1).toString().padStart(2, '0');
  const d = date.getDate().toString().padStart(2, '0');
  const h = date.getHours().toString().padStart(2, '0');
  const min = date.getMinutes().toString().padStart(2, '0');
  return format === 'date' ? `${y}-${m}-${d}` : `${y}-${m}-${d}${h}:${min}`;
};

/**
 * 布尔值状态转中文（全局通用展示适配）
 * @param status 布尔值（业务 Model 通用字段）
 * @param trueText 为 true 时的展示文本
 * @param falseText 为 false 时的展示文本
 * @returns 中文状态（View Model 展示字段）
 */
export const formatBoolStatus = (status: boolean, trueText: string, falseText: string): string => {
  return status ? trueText : falseText;
};

前端分层架构实战：DDD 与 Clean Architecture 落地实践

引言

一、前端 DDD 分层架构：从理论到实际场景

各层代码示例

1. UI 层（纯展示与交互触发）

2. 控制层（交互与业务的衔接）

3. 领域层（核心业务规则）

4. 基础层（通用技术能力）

二、架构方案选型：平衡成本与收益

三、Clean Architecture 设计理念

3.1 核心原则

3.2 架构层次

3.3 数据流向

四、目录结构设计

4.1 Model 层（实体层）

代码示例：Model 层设计

核心价值

4.2 Repository 层（接口适配器层）

代码示例：Repository 层设计

核心价值

4.3 UseCase 层：复用与扩展的设计

4.3.1 类图与设计模式解析

4.3.2 分层设计细节

1. 抽象接口：定义核心能力契约

2. 通用 UseCase：封装共性逻辑

共性逻辑封装点

3. 扩展 UseCase：实现个性化场景

扩展逻辑点

4. 用例工厂：场景与 UseCase 的映射

4.3.3 实际业务场景中的调用

场景调用示例

4.3.4 设计核心价值

4.4 Presenter 层：前端的简化实现

4.4.1 原生定位与前端简化的核心原因

1. Clean Architecture 中的原生定位

2. 前端未单独抽离实现的核心原因

4.4.2 与 Repository 层（接口适配器层）的核心区别

核心区分

4.4.3 前端简化落地方案（职责保留 + 逻辑分散）

场景 1：轻量展示适配（主流）→ 直接嵌入 UI 层 / 控制层

场景 2：复杂展示适配 → 抽离独立 Presenter 工具函数

步骤 1：创建模块内 Presenter 工具函数（非物理层）

步骤 2：UI 层引入工具函数实现渲染

步骤 3：跨模块通用展示适配 → 抽离公共 Presenter 工具

代码示例（全局公共 Presenter 工具）

4.4.4 简化实现的核心原则与价值

1. 核心原则：保留职责，不硬套层级

2. 核心价值

五、总结

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具