An introduction to the adapter pattern for JavaScript design pattern

  • 2020-05-09 18:10:53
  • OfStack

Adapter pattern description

Note: adapter mode, 1 is generally for the interface to be used, not in accordance with the application or the use of the system, but to introduce the intermediate adapter layer class or object;

Scene: just like we bought a mobile phone, after buying back to find that the charging cable plug is 3 plug, but at home, only two plug outlet socket, how to do? For convenience and to be able to charge anywhere, you have to buy a universal charging adapter. So the phone can be charged at home; Otherwise you can only put it there, or run to the place where there is a plug to charge it;

Actual development environment, as the old system, or third party applications provided interfaces, and we define the interface does not match, in the environment of programming to an interface, can't use this old, or third party of the interface, then we will use adapter class inheritance for optimum matching of class, and make the adapter class implements the interface to the introduction of the old system or the third party applications interface;

When programming with interfaces, you can use this matching class to indirectly call the interface of an old system or a third party application.

The code in Javascript to implement the adapter pattern similar to the dynamic object-oriented language can be implemented using the inheritance instance of prototype. Because it is based on the interface constraints, but Javascript has no interface this kind of thing, we remove the interface this 1 layer, directly implement the interface implementation class Target, simulation similar source code out;

The source code examples

1. Class and interface methods to be adapted:



function Adaptee() {
    this.name = 'Adaptee';
}
Adaptee.prototype.getName = function() {
    return this.name;
}

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


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

3. Adaption category:



function Adapte() {
    this.name = '';
} Adapte.prototype = new Adaptee(); Adapte.prototype.queryName = function() {
    this.getName();
}

4. Usage:



var local = new Target();
local.queryName(); // Call the normal implementation class var adapte = new Adapte();
adapte.queryName(); // Call the old system or the first 3 Application interface ;

Other instructions

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



interface Target {
    public String queryName();
}
// Interface reference to
Target local = new RealTarget(); // The above Javascript the Target The implementation class
local.queryName(); // The adapter
Target adapte = new Adapte();
adapte.queryName();

It can be seen that the adapter class is the middle layer connecting the interface with the target class interface. The goal is to solve the problem, the need exists, but we can't use it directly, we can't use it in conjunction with our code definition, so we have to use the adaptor pattern, the adapter pattern, the transformation pattern, the wrapper pattern;


Related articles: