js 设计模式 第十一章 Adapter Pattern

why?

如果页面使用的是YUI前端框架，但是想转换到JQuery 框架上，怎么办？将用到YUI接口的地方都换成JQuery 吗？可以，当工作量大，还不能保证不会漏掉。用Adapter Pattern 吧，实现轻松切换

如果接口不完全适应当前应用，怎么办？重新写个函数？可以，但是含有重复劳动，浪费！用Adapter Pattern ，写个函数，再封装下原来的函数

how?

1 对原有的接口，进行需求再造

原有接口

function interfaceMethod(str1, str2, str3) {...}

但是，我们的对象是：

var clientObject = {    string1: 'foo',    string2: 'bar',    string3: 'baz'};

为了让clientObject可以利用到interfaceMethond ，我们用adapter pattern，将原来的函数再封装下，生成一个新的函数

function clientToInterfaceAdapter(o) {    interfaceMethod(o.string1, o.string2, o.string3);}

clientToInterfaceAdapter(clientObject);

2 类库切换

页面上采用prototype 库

// Prototype $ function.function $() {    var elements = new Array();    for(var i = 0; i < arguments.length; i++) {        var element = arguments[i];        if(typeof element == 'string')           element = document.getElementById(element);        if(arguments.length == 1)           return element;        elements.push(element);     }     return elements;}

/* YUI get method. */YAHOO.util.Dom.get = function(el) {    if(YAHOO.lang.isString(el)) {        return document.getElementById(el);    }    if(YAHOO.lang.isArray(el)) {         var c = [];         for(var i = 0, len = el.length; i < len; ++i) {             c[c.length] = Y.Dom.get(el[i]);         }         return c;    }    if(el) {        return el;    }    return null;};

function PrototypeToYUIAdapter() {    return YAHOO.util.Dom.get(arguments);}function YUIToPrototypeAdapter(el) {    return $.apply(window, el);}

有了适配器后，通过下面简单一句，就可以实现类库切换，其他位置不用修改

$ = PrototypeToYUIAdapter;