JavaScript design pattern Theory and Combat: Adapter mode

Sometimes in the development process, we find that the interface that the client needs and the interface that is provided are incompatible issues. We cannot modify the client interface for special reasons. In this case, we need to adapt the existing interface and incompatible classes, which will refer to the adapter pattern. With adapters, we can use them without modifying the old code, which is the ability of the adapter.

Basic theory

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

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

The most simple adapter for the adapter mode

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

1 var result = Add (n);

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

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

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

1 function Add (v1,v2) {2    reutrn sum (v1,v2); 3 }

This is one of the simplest adapter modes, where we add a wrapper method between two incompatible interfaces, and use this method to connect both of them to work together.

Practical application

With the development of the front-end framework, more and more developers are starting to use the MVVM framework to develop, only to manipulate the data without the need to manipulate DOM elements, and jquery is less useful. Many of the projects still cite the JQuery Library Action tool class, because we are going to use the Ajax provided by jquery to request data from the server. If the role of jquery in the project is only as an AJAX tool library, a bit of killing chickens with sledgehammer feeling, resulting in a waste of resources. At this point we can completely encapsulate an AJAX library of our own.
Let's say that our encapsulated Ajax is used by a function:

1 Ajax ({2     URL: '/getdata ',3     type: ' Post ',4     DataType: ' JSON ',5    data:{6         ID: "123"7     } 8 })9 . Done (function() {})

In addition to calling the interface Ajax is different from the $.ajax of jquery, the others are exactly the same.

There must be a lot of requests for Ajax in the project, and when we replace jquery it's not possible to modify the $.ajax one at a time, so we can add an adapter at this point:

1 var $ = {2     Ajax:function  (options) {3         return Ajax (options); 4     }5 }

This allows for compatibility with old code and new interfaces, and avoids changes to existing code.

Summarize

The principle of adapter mode is simple, is to add a wrapper class, to wrap the new interface to adapt to the old code calls, avoid modifying the interface and calling code.

Scenario: There are more code calls to the old interface, in order to avoid modifying the old code and replacing the new interface, does not affect the existing implementation of the application scenario.

Original address: http://luopq.com/2015/11/10/desgin-pattern-adapter/

JavaScript design pattern Theory and Combat: Adapter mode