JavaScript -- 设计模式结构型设计模式-适配器模式

朱雀 2022-01-12 08:59 261阅读 0赞

适配器模式：是将一个类的接口（方法或属性）转化成客户希望的另外一个接口（方法或属性），适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

适配器模式在生活中应用非常广泛，比如插座转换头，小米手机的耳机转换头，包括翻译工具都是一种适配器。

在前端开发过程中，我可以使用的适配器模式，先来看一下适配器的类图。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

我们举个例子

ajax({
        url: "",
        type: "Post",
        dataType: JSON,
        data: {
            "name": "cyl"
        }
    }).then((data) => {}).catch((err) => {})
    
    //为了适应$.ajax 
    const $ = {
        ajax: function (options) {
            return ajax(options)
        }
    }

比如我们以前项目中写了很大$.ajax这样的请求方式，但是后来因为某种原因这种方式被废弃了，全部使用ajax，我们肯定不可能把以前写的$.ajax全部换成ajax，更加好的方式就是采用适配器模式。

其实Vue.computed也是使用的是适配器模式。当我们需要的数据不是直接可以获取的时候（换一句话就是需要经过转化的时候）就可以使用适配器模式。

下面我们写一个更加明显的例子。

class Duck  { //鸭子
        quack() {
            console.log("嘎嘎")
        }
    }
    class Turkey  { // 火鸡
        gobble() {
            console.log("咕咕")
        }
    }
    class TurkeyAdapter {
        constructor(turkey) {
            this.turkey = turkey;
        }
        quack() {
            this.turkey.gobble();
        }
    }
    
    const duck = new Duck();
    let turkey = new Turkey();
    turkey = new TurkeyAdapter(turkey);
    
    duck.quack();
    turkey.quack();

![20190621163942123.png][]这样我们就可以像调用鸭子一样调用火鸡的gobble方法了。

在平时前端工作中，我们需要对数据格式进行控制，实质上就是在写适配器，让原来不能用的数据经过适配后可以使用了。

当前使用的对象，方法，数据不能满足需求的时候。或者我们想要同一接口（方法）的时候，我们又想使用它，那么我们就应该想到适配器模式。

大家可以看左边个人分类的目录，跟着一起学习。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220109/673fdb7a5314458fb07682e1d5e2e2d5.png
[20190621163942123.png]: /images/20220109/83a74d4cd84f4d2aadff5de909906cc3.png