JS设计模式之适配器模式

适配器模式

将一个类（对象）的接口（方法或属性）转化成另外一个接口，以满足用户需求。

类（对象）之间接口的不兼容问题可以通过适配器模式解决

适配器模式

'use strict';

// 定义框架
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;

  if (dom.addEventListener) {
    dom.addEventListener(type, fn, false);
  } else if (dom.attachEvent) {
    dom.attachEvent('on' + type, fn);
  } else {
    dom['on' + type] = fn;
  }
};

A.on(window, 'load', function() {
  // 按钮点击事件
  A.on('mybutton', 'click', function() {
    // xxx
  });
});



// 背景：忽然项目中想把依赖换成jQuery，但总不能所有的方法都用jQuery的语法重新写一遍，那就写个适配器吧~

/********* 适配器（适配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);
};

参数适配器

'use strict';

// 背景：如果方法需要传入很多参数，那么记住这些参数的顺序是很难的，所以我们经常是以一个参数对象方式传入的。

function a(name, title, age, color, size, prize) {}

/*
 * obj.name: name
 * obj.title: title
 * obj.age: age
 * obj.color: color
 * obj.size: size
 * obj.prize: prize
 */

function a(obj) {}

 // 但是调用它的时候不知道传递的参数是否完整，此时我们通常的做法是用适配器来适配传入的参数对象

function a(obj) {
  var _default = {
    name: '雨夜清荷',
    title: '设计模式',
    age: '20',
    color: 'pink',
    size: 100,
    prize: 50
  };

  for (var i in obj) {
    _default[i] = obj[i] || _default[i];
  }

  // code ....
}

数据适配器

'use strict';

function arrToObj(arr) {
  return {
    name: arr[0],
    type: arr[1],
    title: arr[2],
    data: arr[3]
  };
}

var arr = ['javascript', 'book', '前端编程语言', '12月1日'];

var obj = arrToObj(arr);

console.log(obj);