RicoyWang RicoyWang
首页
  • 前端
  • 资源
  • 感悟
  • 问答
  • 方法论
  • 管理
  • 数据结构算法
  • 计算机原理
  • 图形学
  • 个人体系

    • 个人体系总览
    • 框架
    • UI库
    • 工具
  • 技术栈

    • 前端开发总览
    • 后端端开发总览
    • 数据库总览
  • 领域

    • 数字孪生
    • 物联网
    • 数据中台
    • 技术中台
    • APASS
    • SASS
  • 管理

    • 个人管理
    • PMP
    • 团队管理
    • 项目管理
    • 情绪管理
  • 前端组件
  • 后端组件
  • 应用
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • 设计模式

    • 设计模式总览
  • 数据结构算法

    • JavaScript
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Ricoy Wang

前端娱乐讲师
首页
  • 前端
  • 资源
  • 感悟
  • 问答
  • 方法论
  • 管理
  • 数据结构算法
  • 计算机原理
  • 图形学
  • 个人体系

    • 个人体系总览
    • 框架
    • UI库
    • 工具
  • 技术栈

    • 前端开发总览
    • 后端端开发总览
    • 数据库总览
  • 领域

    • 数字孪生
    • 物联网
    • 数据中台
    • 技术中台
    • APASS
    • SASS
  • 管理

    • 个人管理
    • PMP
    • 团队管理
    • 项目管理
    • 情绪管理
  • 前端组件
  • 后端组件
  • 应用
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • 设计模式

    • 设计模式总览
  • 数据结构算法

    • JavaScript
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
  • 网站
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • JavaScript文章

  • 学习笔记

  • 设计模式

    • 设计模式总览
    • 设计模式对比
    • 创建型模式类型:工厂系列
    • 结构模式类型:适配器模式
      • 结构型模式类型:代理模式--替别人把妹
      • 结构型模式类型:装饰者模式--AOP装饰
      • 行为模式类型:策略模式-状态模式
      • 行为模式类型:观察者模式-订阅发布模式
    • 前端
    • 设计模式
    xugaoyi
    2023-12-29
    目录

    结构模式类型:适配器模式

    Adapter,将一个类(对象)的接口(方法或者属性)转化为另一个接口,以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决

    # 适用场景

    • 1、使用一个已经存在的对象,但其方法或属性接口不符合你的要求;
    • 2、你想创建一个可复用的对象,该对象可以与其它不相关的对象或不可见对象(即接口方法或属性不兼容的对象)协同工作;
    • 3、想使用已经存在的对象,但是不能对每一个都进行原型继承以匹配它的接口。对象适配器可以适配它的父对象接口方法或属性。

    # 示例

    我们想让Duck 和Turkey 的方法接口一致方便新功能使用,由于是老的代码我们不清楚直接修改是否会造成老代码无法使用,于是我们通过TurkeyAdapter做兼容

    Class Duck {
      fly () {
      }
      quack () {
      }
    }
    Class Turkey {
      fly () {
      }
      gobble () {
      }
    }
    // 适配器
    Class TurkeyAdapter {
      constructor (turkey) {
        this.turkey = turkey
      }
      fly () {
        this.turkey.fly()
      }
      quack () { // 原本只有gobble 方法,通过适配器改造为quack方法
        this.turkey.gobble()
      }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var duck = new Duck();
    var turkey = new Turkey();
    var turkeyAdapter = new TurkeyAdapter(turkey);
    
    //原有的鸭子行为
    duck.fly();
    duck.quack();
    
    //原有的火鸡行为
    turkey.fly();
    turkey.gobble();
    
    //适配器火鸡的行为(火鸡调用鸭子的方法名称)
    turkeyAdapter.fly();
    turkeyAdapter.quack();
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    适配器模式也经常用于日常的数据处理上,比如把一个有序的数组转化成我们需要的对象格式:

    const arr = ['Javascript', 'book', '前端编程语言', '8月1日']
    function arr2objAdapter(arr) {    // 转化成我们需要的数据结构
      return {
        name: arr[0],
        type: arr[1],
        title: arr[2],
        time: arr[3]
      }
    }
    
    const adapterData = arr2objAdapter(arr)
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    编辑 (opens new window)
    创建型模式类型:工厂系列
    结构型模式类型:代理模式--替别人把妹

    ← 创建型模式类型:工厂系列 结构型模式类型:代理模式--替别人把妹→

    最近更新
    01
    图形学
    01-03
    02
    计算机原理
    01-03
    03
    数据结构算法
    01-03
    更多文章>
    Theme by Vdoing | Copyright © 2017-2025 RicoyWang | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式