假期JS练习水管弯弯-适配器模式

适配器模式：将一个类（对象）的接口（方法或者属性）转化成另外一个接口，
以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。
比如适配两个代码库，适配前后端数据，等等。
/**
 * 适配器模式：将一个类（对象）的接口（方法或者属性）转化成另外一个接口，
 * 以满足用户需求，使类（对象）之间接口的不兼容问题通过适配器得以解决。
 * 比如适配两个代码库，适配前后端数据，等等。
 *
 * Created by whatled on 2017/4/2.
 */
window.A = A = jQuery;
// 定义框架
var A = A || {};
// 通过ID获取元素
A.g = function (id) {
    return document.getElementById(id);
};
// 为元素绑定事件
A.on = function () {
// 如果传递参数是字符串则以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 () {
        // do something
    })
});
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);
};
/****
 *  obj.name : name
 *  obj.title : title
 *  obj.age : age
 *  obj.color : color
 *  obj.size : size
 *  obj.prize : prize
 ***/
function doSomeThing(obj) {
    //
}
function doSomething(obj) {
    var _adapter = {
        name: ’whatled.com’,
        title: ’实践、分享、共成长’,
        age: 26,
        color: ’pink’,
        size: 100,
        prize: 50
    };
    for (var i in _adapter) {
        _adapter[i] = obj[i] || _adapter[i];
    }
    // 或者 extend(_adapter, obj) 注： 此时可能会多添加属性
    // do things
}
var arr = [’JavaScript’, ’book’, ’前端编程语言’, ’4月2日’];
var obj = {
    name: ’’,
    type: ’’,
    title: ’’,
    time: ’’
};
function arrToObjAdapter(arr) {
    return {
        name: arr[0],
        type: arr[1],
        title: arr[2],
        data: arr[3]
    };
    var adapterData = arrToObjAdapter(arr);
    console.log(adapterData); // {name : "JavaScript", type : "book", title : "前端编程语言", data: "8月1日"}
};
// 为简化模型，这里使用jQuery的ajax方法 理想数据是一个一维数组
function ajaxAdapter(data) {
    // 处理数据并返回新数据
    return [data[’key1’], data[’key2’], data[’key3’]]
}
$.ajax({
    url: ’someAddress.php’,
    success: function (data, status) {
        if (data) {
            // 使用适配后的数据--返回的对象
            doSomething(ajaxAdapter(data));
        }
    }
});