设计模式-适配器模式

介绍

• 旧接口格式和使用者不兼容
• 中间加一个适配转换接口

UML类图

代码演示

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

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

// 测试
let target = new Targe()
target.request()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

场景

• 封装旧接口

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

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

// 做一层适配器
var $ = {
    ajax: function (options) {
        return ajax(options);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• vue computed

    
Original message: "{{ message }}" 
    
Computed reversed message: "{{ reversedMessage }}" 

1
2
3
4

var vm = new Vue({
    el: '#example',
    data: {
        message: 'Hello'
    },
    computed: {
        // 计算属性的getter
        reversedMessage: function() {
            // this指向vm实例
            return this.message.split('').reverse().join('')
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

设计原则验证

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