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

xiaoxiao2021-02-28  111

适配器 就是 转接口

新电脑(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]

转载请注明原文地址: https://www.6miu.com/read-29039.html

最新回复(0)