The introduction

Design Patterns are code Design lessons that are used over and over again in software Design. The purpose of using design patterns is to make code reusable, extensible and maintainable.

The monitor uses an HDMI port, while the computer uses a Type-C port. Under normal circumstances, the device with the same interface can be connected, so the computer is not directly connected to the monitor. If the HDMI interface is converted into type-C interface through an interface converter (adapter), the computer and monitor can be connected.

define

Structural mode

Adapter pattern: Interface transformation that enables two incompatible interfaces to work together.

Interfaces can be understood at the front end as properties or methods

The model structure

1. Target

The interface expected by the current module, that is, the consumer of the functionality.

2. An Adaptee

The interface provided by the module being accessed and adapted, that is, the provider of functionality.

3. Adapter

Bridge modules eliminate interface differences so that two interfaces can work together.

Here is:

An adapter is a strategy adopted to reuse existing modules and accommodate interface differences in the case of an existing system.

The characteristics of

advantages

  1. The adapter pattern complies with the on/off principle
  2. The adapter pattern allows reuse of modules, reducing changes to the target module
  3. The adapter pattern decouples the target module from the adapter module

disadvantages

  1. The adapter pattern requires that the developer be familiar with the adapter and target interfaces so that all functionality can be covered when developing the adapter.
  2. The adapter pattern increases the number of modules, the number of function invocation links, and the complexity of the system.

Therefore, the early architecture design should consider various scenarios as much as possible to ensure its expansibility and stability, and avoid developers having to use the adapter pattern because of interface changes in the future.

implementation

Object module

const adaptee = new Adaptee(); class Target { doSomething() { adaptee.handleTask(); }}Copy the code

Basic module

class Adaptee {
    handleTask() {
        // do something
    }
}
Copy the code

The business of the target module depends on a method (interface) of the base module. In a later release, the base module was greatly upgraded to provide an enhanced API, and to keep the code clean, no backward compatibility was done. At this point you can use the adapter pattern for compatibility.

matches

class Adaptee {
    handleTaskNew() {
        // do something
    }
}
Copy the code

The adapter

const adaptee = new Adaptee(); Class Adapter {handleTask() {// Data adaptee.handletasknew (); }}Copy the code

Object module

const adapter = new Adapter(); class Target { doSomething() { adapter.handleTask(); }}Copy the code

For example,

Use adapter mode to simulate the connection between computer and monitor.

The HDMI interface is supported by the Monitor and the type-c interface. The HDMI interface is supported by the Computer. So we have to define a Converter to convert HDMI.

display

Class Monitor() {display(type, data) {if (type === 'HDMI') {console.log(' display image ', data); }}}Copy the code

Turn to the interface

class Converter() { monitor; constructor() { this.monitor = new Monitor(); } display(type, data) { if (type === 'type-c') { let newData = this.convert(data); this.monitor.display('HDMI', newData); }}}Copy the code

The computer

class Computer { useMonitor() { let converter = new Converter(); converter.display('type-c', { ... Image data}); }}Copy the code

The computer started

let computer = new Computer();
computer.useMonitor();
Copy the code

Application scenarios

  1. When the library is upgraded, history calls are compatible through the adapter pattern
  2. When a component library changes, it is compatible for historical use through the adapter pattern