@TOC

适配器模式

• 介绍
• 演示
• 场景
• 总结

适配器模式 介绍

• 旧接口格式和使用者不兼容

• 中间加一个适配转换接口

概念

将一个类的接口适配成用户所期待的。一个适配允许通常因为接口不兼容而不能在一起工作的类工作在一起，做法是将类自己的接口包裹在一个已存在的类中。

示例

我们国家的电器使用普通的扁平两项或三项插头，而去外国的话，使用的标准就不一样了，比如德国，使用的是德国标准，是两项圆头的插头。怎样解决这个问题呢？只要使用一个电源转化器就行了。

适配器模式 演示

常见的 UML 类图是

因为 JS 少有类继承，也没有强类型，因此可简化为

代码是：

class Adaptee {
    specificRequest() {
        return '德国标准的插头'
    }
}

class Target {
    constructor() {
        this.adaptee = new Adaptee()
    }
    request() {
        let info = this.adaptee.specificRequest()
        return `${info} -> 转换器 -> 中国标准的插头`
    }
}

// 测试
let target = new Target()
target.request()

适配器模式 场景

封装旧接口

随着前端框架的发展，越来越多的开发者开始使用MVVM框架进行开发，只需要操作数据而不需要操作DOM元素，jQuery的作用越来越少。而很多项目中还是引用着jQuery库作用工具类，因为我们要利用jQuery提供的ajax去服务器请求数据。如果jQuery在项目中的作用仅仅是作为ajax工具库的话，有点杀鸡焉用牛刀的感觉，造成资源浪费。这个时候我们完全可以封装一个自己的ajax库。 假设我们封装的ajax就通过一个函数进行使用：

// 自己封装的 ajax ，使用方式如下：
ajax({
    url:'/getData',
    type:'Post',
    dataType:'json',
    data:{
        id:"123"
    }
})
.done(function(){})

// 但因为历史原因，代码中全都是：
// $.ajax({...})

除了调用接口ajax与jQuery的$.ajax的不同，其他完全一样。 项目中请求ajax的地方必然很多，我们替换jQuery的时候不可能一个一个去修改$.ajax，那怎么办呢，这个时候，我们就可以增加一个适配器：

// 做一层适配器
var $ = {
    ajax:function (options){
        return ajax(options);
    }
}

vue computed

适配器模式 总结

• 什么是适配器模式
• 应用场景
• 关键点 - 重新封装一个接口

设计原则验证：

• 将现有接口和使用者进行分离
• 符合开放封闭原则