JavaScript适配器模式原理与用法实例详解

2023年6月11日上午2:54 • JavaScript

JavaScript适配器模式原理与用法实例详解

适配器模式基本概念

适配器模式是一种结构型设计模式，在现实生活中也经常出现。例如旅游适配器，通过把不同国家的电源插头转换成自己国家的电源插头来实现电器的兼容。

在JavaScript中，适配器模式的应用场景也很广泛，主要用于处理一些不兼容的接口或函数调用，，只要是两个或多个对象之间接口不兼容的情况都可以使用适配器模式。

适配器模式的作用

适配器模式的作用就是把一个对象或函数接口转换成另一个对象或函数接口，以使其能够与其他对象或函数协同工作。它可以在不改变原有代码的情况下，使其能够兼容不同的使用场景，提供了代码复用和可扩展性。

适配器模式的实现方式

适配器模式的实现方式主要有两种：

类适配器
对象适配器

下面我们分别详细介绍一下这两种适配器模式实现方式。

类适配器

类适配器主要通过继承来实现。通过创建一个新的适配器类，继承原有的类并实现新的接口或函数方法。这种实现方式需要对原有的类进行一定的修改，因此在一些情况下不太适用。

示例1：类适配器的实现方式

class Adaptee {
    specificRequest() {
        return "原有的接口"
    }
}

class Adapter extends Adaptee{
    request() {
        return "新的接口：" + this.specificRequest();
    }
}

const adapter = new Adapter();
console.log(adapter.request()); // 输出 "新的接口：原有的接口"

对象适配器

对象适配器主要通过组合来实现。通过创建一个新的适配器对象，把原有的对象作为新对象的一个属性，然后实现新的接口或函数方法，以达到适配的效果。

示例2：对象适配器的实现方式

class Adaptee {
    specificRequest() {
        return "原有的接口"
    }
}

class Adapter {
    constructor(adaptee) {
        this.adaptee = adaptee;
    }
    request() {
        return "新的接口：" + this.adaptee.specificRequest();
    }
}

const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
console.log(adapter.request()); // 输出 "新的接口：原有的接口"

适配器模式的实际应用

适配器模式在实际开发中也有很多的应用场景，例如：

Vue.js 中的 computed 计算属性用到了对象适配器模式的实现方式。
jQuery 的 .ajax() 方法允许使用不同格式的参数对 AJAX 请求进行适配，满足不同项目的需要。

示例3：Vue.js 中的计算属性

在Vue.js中，我们经常会使用computed计算属性来处理一些复杂的数据计算逻辑。computed计算属性本质上是一个函数，但是我们却可以像使用对象属性一样使用它。它的实现方式基于对象适配器模式。

const vm = new Vue({
    data: {
        firstName: '张',
        lastName: '三'
    },
    computed: {
        fullName: function() {
            return this.firstName + this.lastName;
        }
    }
});
console.log(vm.fullName); // 输出 "张三"

在这个示例中，computed 内部实现了一个适配器，把计算属性 fullName 的调用方式转换成了调用函数的方式，使得我们可以像调用对象属性一样调用 fullName 属性。