Detailed explanation of how to implement the adapter pattern in design patterns in JavaScript (graphic tutorial)

The adapter pattern can convert (or adjust) an interface according to needs, create another object containing the interface you need, and connect it to the object you want to change the interface to complete this conversion. Let's explain JavaScript in detail below. Methods for implementing the adapter pattern in design patterns

Sometimes during the development process, we will find that the interface required by the client is incompatible with the interface provided. Due to special reasons we cannot modify the client interface. In this case, we need to adapt existing interfaces and incompatible classes, which brings us to the adapter pattern. Through adapters, we can use them without modifying the old code. This is the power of adapters.
Adaptation mode can be used to adapt between existing interfaces and incompatible classes. Objects using this mode are also called wrappers because they are wrapping another object with a new interface. .
On the surface, the adapter pattern looks a lot like the appearance pattern. They all wrap other objects and change the interface they present. The difference between the two is how they change the interface. Facade elements present a simplified interface that provides no additional options and sometimes makes assumptions in order to facilitate the completion of common tasks. The adapter converts one interface into another interface. It does not filter out certain capabilities or simplify the interface. If the client system API is not available, an adapter is required.

Basic theory

Adapter pattern: Convert an interface into the interface required by the client without modifying the client code, so that incompatible codes can work together .

The adapter mainly consists of three roles:
(1) Client: the class that calls the interface
(2) Adapter: the class used to connect the client interface and the interface that provides services
(3) Adapter: Provides services, but the service class is incompatible with the client interface requirements.

Implementation of adapter pattern

1. The simplest adapter

The adapter pattern has no imagination It's so complicated, let's take the simplest example.
The client calls a method for addition calculation:

var result = add(1,2);

But we do not provide the add method, but provide the sum method with the same function:

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

In order to avoid modifying the client and service end, we add a wrapper function:

function add (v1,v2){ reutrn sum(v1,v2); }

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

2. Practical application

With the development of front-end frameworks, more and more developers are beginning to use the MVVM framework for development, and only need to operate data without When manipulating DOM elements, jQuery is becoming less and less useful. Many projects still reference the jQuery library as a tool class, because we need to use the ajax provided by jQuery to request data from the server. If jQuery's role in the project is only as an ajax tool library, it feels like killing a chicken with a powerful tool, resulting in a waste of resources. At this time we can completely encapsulate our own ajax library.
Assume that the ajax we encapsulate is used through a function:

ajax({ url:'/getData', type:'Post', dataType:'json', data:{ id:"123" } }) .done(function(){})

Except for the difference between the calling interface ajax and jQuery’s $.ajax, everything else is exactly the same.
There must be many places requesting ajax in the project. When we replace jQuery, it is impossible to modify $.ajax one by one. So what should we do? At this time, we can add an adapter:

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

This way It can be compatible with old code and new interfaces and avoid modification of existing code.

Summary

The principle of the adapter pattern is very simple. It is to add a new packaging class to wrap the new interface to adapt to the call of the old code and avoid modifying the interface and Calling code.
Applicable scenarios: There are many codes that call old interfaces. In order to avoid modifying old codes and replacing new interfaces, application scenarios do not affect the existing implementation.

1. Applicable occasions of adapter mode:Adapter is suitable for situations where the interface expected by the client system is incompatible with the interface provided by the existing API. The two methods adapted by the adapter should perform similar tasks, otherwise the problem will not be solved. Just like bridge elements and facade elements, by creating an adapter, you can isolate an abstraction from its implementation so that both can change independently.

2. Advantages of the adapter pattern:Use a new interface to wrap the interface of an existing class, so that the client program can use this class that is not tailor-made for it. No need for major surgery for this.

3. Disadvantages of the adapter mode:Some people think that the adapter is an unnecessary overhead that can be avoided by rewriting the existing code. In addition, the adapter pattern will also introduce a number of new tools that need to be supported. If the existing API is not yet finalized, or if the new interface is not yet finalized, the adapter may not always work.
In cases involving large systems and legacy frameworks, its advantages often outweigh its disadvantages.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Implementing the composition of JavaScript (detailed interpretation of BOM and DOM)

Summary of the application of Adapter adapter pattern in JavaScript design pattern programming (graphic tutorial)

Usage and difference between some() and filter() in JavaScript arrays ( Code attached)

The above is the detailed content of Detailed explanation of how to implement the adapter pattern in design patterns in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!