9-JavaScript设计模式——适配器模式

适配器 就是 转接口

新电脑（USB）             <----------- ps2-to-usb ----------->             鼠标和键盘（ps2 圆口的）

上代码：

// 程序中：简单的适配器
var obj = { // 相当于 鼠标和键盘（圆口的）
  str1 : '111',
  str2 : '222',
  str3 : '333',
};

// 适配器方法
function adapter(obj){
  inerfaceMethod(obj.str1, obj.str2, obj.str3);
}

// 新电脑 usb
function inerfaceMethod(x, y, z){ 
  
}

企业开发中：JS库（extjs， jquery, yui, prototype ...）

如果，我们用雅虎的框架YUI，但Prototype程序员按Prototype语法写代码，这种情况可以使用 适配器 解决。

// Prototype $ 不需要传递任何形参
function $(){
  if(arguments.length == 1 && typeof arguments[0] === 'string')return document.getElementById(arguments[0]);
  var elements = [];
  for(var i = 0, len = arguments.length; i < len; i++){
    var ele = arguments[i];
    if(typeof ele === 'string') ele = document.getElementById(ele);
    elements.push(ele);
  }
  return elements;
}

// YUI get() 传递一个参数：不是一个字符串，就是一个数组
var YAHOO = {};// 命名空间

YAHOO.get = function(el){
  if(typeof el === 'string')return document.getElementById(el);
  if(el instanceof Array){
    var elements = [];
    for(var i = 0, len = el.length; i < len; i++){
      elements[elements.length] = YAHOO.get(el[i]);
    }
    return elements;
  }
  if(el)return el;
  return null;
};

<input type="text" id="inp1">
<input type="text" id="inp2">
<input type="text" id="inp3">

// 这是Prototype开发人员的习惯写法
var doms = $('inp1', 'inp2', 'inp3');
alert(doms);//[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement]

// YUI 开发人员的习惯写法
var doms = YAHOO.get(['inp1', 'inp2', 'inp3']);
alert(doms);//[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement]

/*
  用 Prototype 传参的方式来调用 YUI，即：
  YAHOO.get('inp1', 'inp2', 'inp3');
*/


// 用 适配器 对接
YAHOO.get = YUIToPrototypeAdapter;


function YUIToPrototypeAdapter(){
  if(arguments.length == 1){
    // 如果参数是一个数组，arguments 相当于一个双重数组 [['inp1', 'inp2', 'inp3']]，不能直接传给 $函数
    var e = arguments[0];
    //document.write([e]);// inp1
    //document.write(arguments);// [object Arguments]
    return $.apply(window, e instanceof Array ? e : [e]);
  }else{
     return $.apply(window, arguments);
  }
}


// 测试
alert(YAHOO.get('inp1'));// [object HTMLInputElement]


alert(YAHOO.get('inp1', 'inp2', 'inp3'));//[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement]


alert(YAHOO.get(['inp1', 'inp2', 'inp3']));
//[object HTMLInputElement],[object HTMLInputElement],[object HTMLInputElement]