javascript适配器模式----2022-11-20

/**
 * 概念：适配器模式
 * 将一个类(对象)的接口(方法或者属性)转化成另外一个接口，以满足用户需求，使类(对象)之间接口
 * 的不兼容问题通过适配器得以解决
 */

// 1、juqery 适配器
// window.A = A = jquery

// 2、适配异类框架
// 假如有这么一个A类框架
// 定义框架
var A = A || {};
// 通过ID 获取元素
A.g = function(id) {
    return document.getElementById(id)
}
// 为元素绑定事件
A.on = function(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('mybutton', 'click', function() {
        console.log('点击成功')
    })
})

// 加入之前我们用的A框架写的代码，现在想转换为jquery,那么我们需要写一个适配器，适配以前的代码
// 下面是适配器
A.g = function(id) {
    // 通过jquery 获取jquery 对象，然后返回第一个成员
    return $(id).get(0)
}

A.on = function(id, type, fn) {
    // 如果传递参数是字符串则以id 处理，否则以元素对象处理
    var dom = typeof id === 'string' ? $('#' + id) : $(id);
    dom.on(type, fn);
}
// end


/**
 * 参数适配器
 * 比如我们封装一个方法需要传很多参数，然而我们一个一个传，是很难记住每一个参数的
 * 因此我们的做法是传递一个对象过去，使用此种方法，就要用适配器来适配传入的这个参数对象，给默认值
 * 
 */

function doSomeThing(obj) {
    var _adapter = {
        name: '王亚浩',
        title: '设计模式',
        age: 24,
        color: 'pink',
        size: 100,
        prize: 50
    };
    for (let i in _adapter) {
      _adapter[i]  = obj[i] || _adapter[i];
    }
    // 或者extend(_adapter, obj) 注此时可能会多添加属性
}

// 数据适配
// 元数据
var arr = ['javascript', 'book', '前端编程语言', '8月1日']
// 目标数据结构
var obj = {
    name:'',
    type:'',
    title:'',
    time:''
}

function arrToObjAdapter (arr) {
    return {
        name: arr[0],
        type: arr[1],
        title: arr[2],
        data: arr[03],
    }
}

// 用例
var adapterData = arrToObjAdapter(arr)
console.log(adapterData)