A detailed explanation of JavaScript implementation of the adapter pattern in design mode _ basic knowledge

Sometimes in the development process, we will find that the interface required by the client and the interface is incompatible with the problem. We cannot modify the client interface for special reasons. In this case, we need to fit the existing interface and incompatible classes, which is referred to as adapter mode. With adapters, we can use them without modifying the old code, which is the power of the adapter.
Adaptive mode can be used to fit between existing interfaces and incompatible classes, and objects using this pattern are called wrappers (wrapper) because they are wrapping another object with a new interface.
On the surface, the adapter pattern looks much like the appearance pattern. They all have to wrap the other object and change the interface that it renders. The difference is how they change the interface. The appearance element presents a simplified interface that does not provide additional choices, and sometimes makes assumptions about the convenience of accomplishing common tasks. The adapter, however, converts an interface into another interface, which does not filter out certain capabilities or simplifies the interface. If the client system APIs are not available, you need to use an adapter.

Basic theory

Adapter Mode: Converts an interface to the interface required by the client without having to modify the client code so that incompatible code can work together.

Adapters are composed of 3 main roles:
(1) Client: The class that invokes the interface
(2) Adapters: Classes used to connect the client interface and the interface providing the service
(3) Adapter: Provide service, but not compatible with Client interface service class.

Implementation of Adapter mode

1. The simplest adapter

The adapter pattern is not as complex as it might seem, and for the simplest example.
The client invokes a method for addition calculation:

var result = Add (1,2);

But we did not provide the Add method, which provides the same functionality as the Sum method:

function sum (v1,v2) {return
  v1 + v2;
}

To avoid modifying the client and server side, we add a wrapper function:

function Add (v1,v2) {
  reutrn sum (V1,V2);
}

This is the simplest adapter pattern, where we add a wrapper between two incompatible interfaces, and use this method to connect both to make it work together.

2. Practical Application

With the development of the front-end framework, more and more developers began to use the MVVM framework for development, only need to manipulate the data and do not need to manipulate the DOM elements, jquery is less effective. Many projects still cite the JQuery Library Action tool class, because we want to use the Ajax provided by jquery to server request data. If the role of jquery in the project is only as an AJAX tool library, a bit of killing the chicken how to use the feeling of a sledgehammer, resulting in waste of resources. At this time we can completely encapsulate an AJAX library of our own.
Let's say our encapsulated Ajax is used in a single function:

Ajax ({
  URL: '/getdata ',
  type: ' Post ',
  dataType: ' json ',
  data:{
    ID: ' 123 '
  }
})
. Done (function () {})

In addition to calling the interface Ajax differs from jquery's $.ajax, the other is exactly the same.
There must be a lot of places in the project where Ajax is requested, and when we replace jquery it's not possible to modify $.ajax one at a time, so what if we can add an adapter at this point:

var $ = {
  Ajax:function (options) {return
    ajax (options);
  }
}

This will enable the old code and the new interface to be compatible, avoiding changes to existing code.

Summarize

The principle of adapter mode is very simple, is to add a wrapper class, to the new interface packaging to adapt to the old code calls, avoid modifying the interface and calling code.
Applicable scenario: There is more code to call the old interface, in order to avoid the modification of old code and replace the new interface, does not affect the existing implementation of the application scenario.

1. Adapter mode for the application of the occasion:
adapters apply to situations where client systems expect interfaces that are incompatible with interfaces provided by existing APIs. The adapter's two methods should perform similar tasks, otherwise it will not solve the problem. Just like bridging elements and appearance elements, by creating adapters, you can isolate abstractions from their implementations so that they change independently.

2. The benefit of Adapter mode:
the interface of an existing class is packaged with a new interface so that the client program can use a class that is not tailored for it without having to operate on it.

3. Disadvantages of setting up the adapter mode:
Some people think that adapters are an unnecessary overhead and can be avoided by overriding existing code. In addition, the adapter pattern introduces a batch of new tools that need to be supported. If the existing APIs are still undecided, or if the new interface is not yet in shape, the adapter may not always work.
In cases involving large systems and legacy frameworks, the advantages are often more pronounced than disadvantages.