定义

为了解决不兼容问题把一个类的接口换成想要的接口

场景

有来自多个不同数据字段的接口的数据，为了统一接收这些数据就需要一个适配器

  1. // 本地资源文件上传之后的数据结构
  2. export interface ResourceLocalFileType {
  3.   uuid: string;
  4.   name: string;
  5.   size: number;
  6.   created: number;
  7.   lastModified: number;
  8.   resourceType: number;
  9.   cancel: () => void;
  10.   status: string;
  11. }
  13. // 资源概况接口返回的数据结构
  14. export interface ResourcePackageFileType {
  15.   uuid: string;
  16.   materialName: string;
  17.   materialLink: string;
  18.   materialType: number;
  19.   uid?: string;
  20.   ext?: string;
  21. }
  23. // 原先数据后台返回的数据接口
  24. export interface ResourceBackendFileType {
  25.   uuid: string;
  26.   resourceName: string;
  27.   resourceLink: string;
  28.   resourceType: number;
  29.   version: string;
  30.   ext: string;
  31. }

采用适配器模式，将不同的数据结构适配成展示组件所能接受的数据结构

  1. export interface AdapterResourceType {
  2.   uuid: string;
  3.   created: number;
  4.   fileNo: number;
  5.   fileName: string;
  6.   fileOrigin: string;
  7.   fileStatus: string;
  8.   fileInfo: {
  9.     type: number;
  10.     size?: number;
  11.     [key: string]: any;
  12.   };
  13.   // 本地图片额外操作
  14.   action?: {
  15.     cancel?: () => void;
  16.     [key: string]: any;
  17.   };
  18. }

适配器模式 - 图1

在数据进行组件列表展示时，将来源不同的数据经过适配器处理，进行整合，然后传递给展示组件，以达到我们的目的