适配器模式

发表于 | 分类于 ， ，

结构型设计模式之适配器模式

适配器模式

描述

两个类或对象的接口，通过这个接口让我们按照自己想要的方式使得数据流通。包含框架适配，参数适配，数据适配，服务器端数据适配。该模式的目的就是让数据按照我们的方式来走通

功能

  1. 框架适配

  2. 参数适配

    若有时调用一个函数，有些参数是默认的或者是不必要的，我们就可以用参数适配器来适配参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function paramAdaptor(obj) {
        var _adaptor = {
            name: 'kc',
            age: '22',
            title: 'about param adaptor',
            like: 10
        };
        for(var i in _adaptor) {
            _adaptor[i] = obj[i] || _adaptor[i];
        }
    }

  3. 数据适配

    数组形式的参数往往不知道哪个值的具体意义，所以我们可以通过写数据适配器来达到我们想要的数据结构

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function dataAdaptor(arr) {
        return {
            name: arr[0],
            age: arr[1],
            title: arr[2]
        }
    }
    var myCustomData = dataAdaptor(['kc', 22, 'about data adaptor']);
    // {name: 'kc', age: 22, title: 'about data adaptor'}
    console.log(myCustomData);

  4. 服务器端数据适配

    后端数据结构往往不是一成不变的，如果我们直接把后端返回的值拿来用，当后端数据变动的时候，我们不得不改动自己的结构，尤其是当数据结构比较复杂的时候，这时候我们可以通过该适配器接口把从后端拿来的数据改造成我们想要的数据结构。如果后端数据变动，我们只需要改写适配器或者增加一个适配器（防止数据结构又变回去）就可以让我们的程序健壮起来。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function asyDataAdaptor(asyData) {
        return {
            ...
        }
    }
    function (url, opts) {
        request(url, opts).then(function(json) {
            if(!!json && json.code == 200) {
                var data = asyDataAdaptor(json.data)
            }
        })
    }

总结

适配器模式使得我们在获取数据时候的来源方面做了控制，获取数据的来源包括函数的参数，函数返回值（返回值作为另一个函数的参数或者作为regular中模板数据渲染组件），后端返回的数据，凡是我们数据的来源不确定，我们都可以写适配器来使得数据按照我们想要的方式流通