设计模式--适配器模式--每天进步一点点

适配器模式的作用是解决两个软件实体间的接口不兼容的问题。

适配器模式 在项目中经常用到，有时候可能你没有意识到，比如后端的接口返回的数据格式和字段名变了，你又不想过多的修改原先的代码。这时都会想到将后端接口返回的数据转换成原先接口的数据格式。

下面以上传文件为例：

// 原先的文件上传后，返回的数据格式
const files = {
   eTag: "74be63"
   file: {
     fid: "2371/02b0bb8a334.jpg"
     fileName: "hdImg_3298a734aba16104361386.jpg"
     fileUrl: "xxxxx"
   }
   size: 34507
}

// 新版的变为：
const newFiles = {
   eTag: "74be63"
   fid: "2371/02b0bb8a334.jpg"
   fileName: "hdImg_3298a734aba16104361386.jpg"
   fileUrl: "xxxxx"
   size: 34507
}
// 为了不影响旧的业务，所以使用适配器：
const filesChange = (newFiles) = > {
    const { eTag = '', fid = '', fileName = '', fileUrl = '', size = ''} = newFiles
    return {
    	eTag: "74be63"
     file: {
       fid: "2371/02b0bb8a334.jpg"
       fileName: "hdImg_3298a734aba16104361386.jpg"
       fileUrl: "xxxxx"
     }
     size: 34507
    }
 }
filesChange(newFiles) // 转换成旧格式

有时为了偷懒，在两个项目间我们也使用适配器模式。

• pc端的项目使用Ant Design 框架， h5页面使用Vant 框架，pc端和h5端有一个方法一样，比如文件上传方法，但框架的提示不同，Vant使用 $toast，Ant Design 使用$message，所以为了直接复制过来就能用，写一个 $toast 转换成$message 的转换方法。