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;