Introduction to the adapter pattern in the JavaScript Design Pattern _ javascript skills

This article mainly introduces the adapter mode of the JavaScript design mode. The adapter mode is generally used for the interface to be used, which does not match the application or the system, if you want to introduce intermediate adaptation layer classes or objects, you can refer Adapter mode description

Note: The adapter mode is generally used for interfaces that do not conform to the requirements of this application or the system, and the intermediate Adaptation Layer class or object needs to be introduced;

Scenario: We bought a mobile phone. After buying it, we found that the charging wire plug is a three-plug, but there are only two plug-in sockets in the house. What should we do? For convenience, you have to buy a universal charging adapter to enable power-on anywhere. In this way, you can only power-on your phone at home. Otherwise, you can only put it on, or run to a place with this plug to charge;

In the actual development environment, because the old system or interfaces provided by third-party applications do not match the interfaces we have defined, the old interfaces cannot be used in the interface-oriented programming environment, or a third-party interface, then we use the adaptive class to inherit the class to be matched, and let the adaptive class implement the interface to introduce the interface of the old system or third-party application;

In this way, you can use this matching class to indirectly call the interfaces of the old system or third-party applications.

You can use prototype inheritance instances to implement code similar to the dynamic object-oriented language adapter mode in Javascript. Because it is based on interface constraints, but Javascript does not have interfaces, we remove the interface layer and directly implement the interface implementation class Target, simulating similar source code;

Source code example

1. Classes and interface methods to be adapted:

The Code is as follows:

Function Adaptee (){
This. name = 'adaptee ';
}
Adaptee. prototype. getName = function (){
Return this. name;
}

2. Common Implementation class [the implementation class is provided directly because there is no interface in Javascript]

The Code is as follows:

Function Target (){
This. name = 'target ';
}

Target. prototype. queryName = function (){
Return this. name;
}

3. Adaptation class:

The Code is as follows:

Function Adapte (){
This. name = '';
}

Adapte. prototype = new Adaptee ();

Adapte. prototype. queryName = function (){
This. getName ();
}

4. Usage:

The Code is as follows:

Var local = new Target ();
Local. queryName (); // call a common implementation class

Var adapte = new Adapte ();
Adapte. queryName (); // call the old system or third-party application interface;

Other Instructions

In step 4 above, var local and var adapte specify interface references in object-oriented languages such as Java and C #, such:

The Code is as follows:

Interface Target {
Public String queryName ();
}
// Interface reference pointing
Target local = new RealTarget (); // The above Javascript Target implementation class
Local. queryName ();

// Adapter
Target adapte = new Adapte ();
Adapte. queryName ();

It can be seen that the adapter class is the middle layer between the connection interface and the target class interface. It is used to solve the problem. The required target already exists, but we cannot use it directly and cannot work with our code definitions, you have to use the adaptive mode. The adapter mode is also called the conversion mode and the packaging mode;