JavaScript设计模式 | 10-适配器模式

1、模式定义

适配器模式，把一个类（对象）的接口（方法和属性）转化成另一个接口，以满足用户需求，以解决类（对象）之间的不兼容性问题。

2、生活中的适配器

两根垂直相交的水管在连接处的直角弯管，就是适配器。两孔插头被转化成三孔插头的电源设备，也是适配器。

所谓代码中的适配器，其实就是为两个不同的代码库所写的额外的兼容性代码。

3、适配器模式 举例

让某个库A适配jQuery库，实现如下：

// 适配器模式，让A框架适配jQuery
window.A = A = jQuery;

4、适配器模式 再举例

让指定的库B，适配jQuery，并用jQuery库中的方法，覆写B库中的某些方法。

// 库B的源码如下：
var B = B || {};
B.g = function(id){
    return document.getElementById(id);
};
B.on = function(id,type,fn){
    var dom = typeof if === 'string' ? this.g(id) : id;
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false);
    }else if(dom.attachEvent){
        dom.attachEvent('on'+type,fn);
    }else{
        dom['on'+type] = fn;
    }
}

// 适配器模式，把B框架转换成jQuery，并覆写B库的两个方法
window.B = B = jQuery;

B.g = function(id){
    return $(id).get(0);
}
B.on = function(id,type,fn){
    var dom = typeof id === 'string' ? $('#'+id) : $(id);
    dom.on(type,fn);
}

事实上，对两种“血缘”比较相近的框架进行适配，相对是比较容易的。对两种“血缘”相差甚远的框架进行适配，是非常复杂的。因此，日常工作中，在使用适配器模式时，尽量以相似的框架为基础。

5、参数适配器

适配器模式，除了可用于两个或多个库之间适配外，还可以用于参数适配。当一个方法所接收的参数较多时，就可以用适配器来优化。示例代码如下：

// 一个需要接收多个参数的方法
function doSomeThing(name,title,age,color,size,price){};

// 适配器模式: 使用适配器来优化这个方法，用一个json对象作为适配参数
function doSomeThing(options){
    var _adapter = {
        name:'清荷',
        title:'设计师',
        age:24,
        color:'yellow',
        size:100,
        price:50.9
    }
    for(var i in _adapter){
        _adapter[i] = options[i] || _adapter[i];
    }
};

6、使用适配器模式，对两种不同的数据结构进行适配

// 数组结构：
var arr = ['geekxia', '工程师', '男', 25];

// 使用适配器模式，把上述的数组结构转化成json结构
function arrToJsonAdapter(arr){
    return {
        name: arr[0],
        job: arr[1],
        gender: arr[2],
        age: arr[3]
    }
}

var geekxia = arrToJsonAdapter(arr);
console.log(geekxia);

7、适配器模式 用于处理服务端的响应数据

// 适配器模式：用于处理不确定的数据源，得到我们希望的数据格式
function ajaxAdapter(data){
    return [data['k1'],data['k2'],data['k3'],data['k4']];
}

// 示例：用指定的数据格式，对服务端的响应数据进行适配
$.ajax({
    url: 'data.php',
    success: function(data,status){
        if(data){
            // 把服务端数据转化成我们希望的数据格式
            var myData = ajaxAdapter(data);
            // do something
        }
    }
});

像这样，通过适配器模式，我们可以把不确定的数据源转化成我们希望的数据格式，即使日后服务端的响应数据的数据格式（或字段名称）发生了变化，我们仍然只需要修改适配即可，而无须修改业务逻辑代码，这使得我们的代码更加容易维护。

---

完！！！