JavaScript设计模式（九）：水管弯弯-适配器模式

适配器模式（Adapter）

将一个类（对象）的接口（方法或者属性）转化成另外一个接口，以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。

适配异类框架

团队内存在一个和jQuery类似的A代码库，但是现在要代码库中的方法适配到jQuery上，该如何实现？

• A代码库

    // 团队内部创建的A代码库
    const A = {
       
        // 通过ID获取元素
        g(id) {
       
            return document.getElementById(id)
        },
        // 为元素绑定事件
        on(id, type, fn) {
       
            // 如果传递参数是字符串则以id处理，否则以元素对象处理
            var dom = typeof id === 'string' ? this.g(id) : id;
            // 标准DOM2级添加事件方式
            if (dom.addEventListener) {
       
                dom.addEventListener(type, fn, false);
                // IE DOM2级添加事件方式
            } else if (dom.attachEvent) {
       
                dom.attachEvent('on' + type, fn);
                // 简易添加事件方式
            } else {
       
                dom['on' + type] = fn;
            }
        }
    };
  
    // 窗口加载完成事件
    A.on(window, 'load', function () {
       
        // 按钮点击事件
        A.on('btn01', 'click', function (e) {
       
            // do something
            console.log('AAA');
        });
    });
  

• 适配实现：

    const A = {
       
        // 通过ID获取元素
        g(id) {
       
            // 通过jQuery获取jQuery对象，然后返回第一个成员
            return $(id).get(0);
        },
        // 为元素绑定事件
        on(id, type, fn) {
       
            // 如果传递参数是字符串则以id处理，否则以元素对象处理
            var dom = typeof id === 'string' ? {
       mathJaxContainer[0]}(id);
            dom.on(type, fn);
        }
    };
  
    // 窗口加载完成事件
    A.on(window, 'load', function () {
       
        // 按钮点击事件
        A.on('btn01', 'click', function (e) {
       
            // do something
            console.log('AAA');
        });
    });
  

参数适配

当一个方法的传参有固定的顺序是我们很难进行适配，因为第三方的框架可能不能完美的契合我们写的传参顺序方法，解决方法如下：

通过传入对象的方式进行参数的适配 （数组格式的数据我们一般也会处理成对象的格式在进行传参）

function funA({
    name, age }) {
   
    console.log(name, age);
}

let data1 = {
   
    name: 'Lee',
    age: 18
};

let data2 = {
   
    age: 18,
    name: 'Lee'
};

// 无所谓对象内部的顺序，打印结果一样
funA(data1); // Lee 18
funA(data2); // Lee 18