• 欢迎访问少将全栈,学会感恩,乐于付出,珍惜缘份,成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 吐槽,投稿,删稿,交个朋友,商务沟通v:ai_draw
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏少将全栈吧

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

Web前端 admin 7年前 (2017-04-02) 2237次浏览 已收录 0个评论 扫描二维码

适配器模式:将一个类(对象)的接口(方法或者属性)转化成另外一个接口,

以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决。

比如适配两个代码库,适配前后端数据,等等。

/**
 * 适配器模式:将一个类(对象)的接口(方法或者属性)转化成另外一个接口,
 * 以满足用户需求,使类(对象)之间接口的不兼容问题通过适配器得以解决。
 * 比如适配两个代码库,适配前后端数据,等等。
 *
 * 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));
        }
    }
});

喜欢 (0)
[🍬谢谢你请我吃糖果🍬🍬~]
分享 (0)
关于作者:
少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(0)个小伙伴在吐槽
  1. 正在努力学习中,博主讲的很仔细。
    拿着灼热的铁2017-04-12 09:52 回复 未知操作系统 | 未知浏览器