Use the adapter mode in JavaScript

 

Looking at the new JavaScript design model bought by Dangdang a year ago (translated by Rose Harmes, Dustin Diaz, Xie tingsheng, published by People's post and telecommunications Publishing House ), the author gave a detailed explanation of the application of several Design Patterns in JavaScript in the Design Patterns co-authored by GoF. It is a good book.

 

My favorite design modes are factory mode, adapter mode, combination mode, and observer mode. In this summary, I hope this mode can be used in JavaScript development.

 

1. What is the adapter mode?

In computer programming, the adapter mode adapts a class interface to what you expect. An adaptation allows a class that cannot work together because the interface is not compatible, by encapsulating its own interface in an existing class. If the existing interface can meet the needs well, there may be no need to use the adapter.

 

On the surface, the adapter mode is similar to the facade mode. They all need to wrap other objects and change their rendering interfaces. The difference between the two lies in how they change interfaces. The facade element presents a simplified interface, which does not provide additional options, and sometimes makes certain assumptions to facilitate task completion. The adapter converts an interface to another interface, which does not filter out certain capabilities or simplify the interface.

 

2. Application scenarios of the adapter Mode

The following are a few examples suitable for using the adapter mode:

 

(1) Inconsistent parameter types: assume that an object is defined as follows:

 

Var clientObject = {

String1: 'foo ',

String2: 'bar ',

String3: 'baz'

};

There is also a function with three strings as parameters:

 

Function interfaceMethod (str1, str2, str3 ){

}

To pass cientObject as a parameter to the interfaceMethod method, you can use the adapter mode to solve the problem:

 

Function clientToInterfaceAdapter (o ){

InterfaceMethod (o. string1, o. string2, o. string3 );

}

Now you can pass the clientObject object as a parameter to the clientToIntefaceAdapter method:

 

ClientToIntefaceAdapter (clientObject );

Using the adapter mode section solves some problems caused by inconsistent parameter types.

 

(2) PS2-to-USB adapter: I prefer this example about the adapter, a good understanding of the role of the adapter. Taking PC hardware as an example, PS2 plug-in is a standard interface connecting the mouse and keyboard. For many years, almost all PCs have such interfaces, so the mouse and keyboard designers have a fixed design goal. Later, hardware engineers invented a technology that could completely replace the PS2 interface. This design switched to a USB system to support the keyboard, mouse, and other peripherals.

 

However, when the problem arises, it doesn't matter whether the consumer has a USB keyboard or not. They decide not to support PS2 plug-in to reduce costs and save space. But the keyboard and mouse designers to sell The PS2 interface for the previous production of thousands of keyboard and mouse, need to have the support of the adapter, PS2-to-USB came into being.

 

3. Use the adapter mode in JavaScript

There are a lot of available libraries to choose from. Let's see which tools are most suitable for your needs and what impact they will have on your development. In addition, the programming style, implementation difficulty, and compatibility of developers should be considered. Even if you have selected a database before, the database may be replaced for performance, security, design, and other considerations.

 

How can we achieve smooth transition between two databases? In this case, you can use the adapter mode to transition from one API to another. For example, in the following example, the $ function of the Prototype library is implemented to YUI (Yahoo! User Interface. These two functions have similar functions, but there are some differences in interfaces. First, let's look at the $ function of Prototype:

 

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 (Yahoo! User Interface) The get method code is as follows:

 

YAHOO. util. Dom. get = function (){

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] = YAHOO. util. Dom. get (el [I]);

}

Return c;

}

 

If (el ){

Return el;

}

Return null;

};

The difference between the two: get has a parameter, which can be an HTML element, a string, or an array composed of a string or HTML element. The $ function does not officially list parameters, but allows users to input any number of parameters, which can be strings or HTML elements.

 

If you want to change the $ function of Prototype to the get method of YUI, you can use the following adapter:

 

Function PrototypeToYUIAdapter (){

Return YAHOO. util. Dom. get (arguments );

}

After the following code is added, the $ method can be used after the Prototype code base is replaced with YAHOO:

 

$ = PrototypeToYUIAdapter;

The following is an adapter used to adapt the get method of YAHOO to the $ method of Prototype:

 

Function YUIToPrototypeAdapter (el ){

Return $. apply (window, el instanceof Array? El: [el]);

}

After the following code is added, the get method can be used after the YAHOO code library is replaced with Prototype:

 

YAHOO. util. Dom. get = YUIToPrototypeAdapter;

 

 

4. Advantages and disadvantages of the adapter Mode

The biggest advantage of the adapter is that it can avoid large-scale rewriting of existing customer code.

 

If the existing API is not finalized, or the new interface is not, the adapter mode is not suitable.

 

5. References

(1) Ross Harmes, Dustin Dial, translated by Xie tingsheng, published by People's post and telecommunications Press

 

(2) "adapter mode _ Baidu Encyclopedia":

 

Http://baike.baidu.com/view/3371585.htm

From honey goprivate School