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]