JS设计模式3：适配器模式

原理及作用

• 将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作
• 使用一个已经存在的对象，但其他方法或属性接口不符合我们的要求
• 类似于充电接口转换器，万能充电器等

es5简单适配器

 // 旧接口
        function userOldApi() {};

        // 适配器
        function adapter() {
            something(); // 
            return userOldApi();
        }

        var old = userOldApi();
        var _new = adapter();

es6简单适配器

class Plug {
            fn() {
                return '德国标准插头'
            }
        }

        // 插座
        class Target {
            constructor() {
                this.plug = new Plug();
            }
            adapterPlug() {
                return this.plug.fn() + '转换器-中国标准插头'
            }
        }

        let target = new Target();
        console.log(target.adapterPlug());

可以保留源代码，实现扩展

适配器的适用场景

1 函数参数的传递

函数中形参的顺序是固定的，每次传参需要记住形参的位置来传递，这样就很麻烦
适配器模式就能解决这一麻烦

1. 设置一个适配器，形参和实参作为对象传递
2. 适配器内依次将对象里的参数传给源函数
3. 调用适配器则不需要记住参数的位置，适配器按顺序传参

// 源函数
function doThing(name, title, color, size) {
    console.log(name, title, color, size);
}

// 适配器
function adapterDoThing(obj) {
    // 不传参数时的默认值
    var _adapter = {
        name: '设计模式',
        title: '适配器模式',
        color: 'red',
        size: '32px',
    }

    for (var i in _adapter) {
        _adapter[i] = obj[i] || _adapter[i]; // 传参与默认
    }
	
	// 适配器内调用源函数
    doThing(_adapter.name, _adapter.title, _adapter.color, _adapter.size)
}
var obj_data = {
    color: 'blue',
    size: '18px',
}
adapterDoThing(obj_data)

2 接收后端数据

function arrToObjAdapter(arr) {
    return {
        data1: arr[0],
        data2: arr[1],
        data3: arr[2],
    };
}

var arr = ['javaScript', 'book', 'json'];

var adapterData = arrToObjAdapter(arr3);

3 兼容性问题