Adapter pattern: Converts the interface (method or property) of one class (object) into another interface (method or property) that the customer expects, so that classes (object) that would otherwise not work together due to incompatible interfaces can work together. Simply put, it is a “converter” designed for compatibility.

For people with OBSessive-compulsive disorder, there are so many different shaped interfaces that correspond to different data lines. Wouldn’t it be nice to have a transfer interface to implement set compatibility? Yes, you deserve one. (Major manufacturers step up their efforts…)

Life little chestnut:

  1. Hong Kong type plug converter
  2. Notebook power adapter
  3. Type – C interface

Model features

  1. The new wrapper object (adapter object) implements access to the interface of the original object (the interface name can be different)
  2. The adapter object does not preprocess the request data and passes it directly to the original object interface for processing
  3. The adapter object has the same external interface name, so that external callers can call multiple object methods through the same interface

Pattern implementation

Implementation method: on the basis of not changing the original object interface, define a wrapper object, the new object transfer to call the original interface, so that external callers can use it normally.

Third-party SDK applications

// Adaptor implements unified map SDK rendering
var googleMap = {
    show: function(){
        console.log('Start rendering Google Maps'); }};var baiduMap = {
    display: function(){
        console.log('Start rendering baidu Map'); }};// The adapter object that is actually called externally
var baiduMapAdapter = {
    show: function() {
        returnbaiduMap.display(); }};// External caller
var renderMap = function(map) {
    map.show();   // unified interface call
}；

renderMap(googleMap);
renderMap(baiduMapAdapter);
Copy the code

ES6 implements adapters

// Use ES6 adaptor to achieve unified map SDK rendering
class googleMap {
  show() {
    console.log('Start rendering Google Maps'); }}class baiduMap {
  display() {
    console.log('Start rendering baidu Map'); }}class baiduMapAdapter extends baiduMap {
  constructor() {
    super(a); } show() {this.display(); }}// External caller
function renderMap(map) {
  map.show();   // unified interface call
}

renderMap(new googleMap());
renderMap(new baiduMapAdapter());
Copy the code

Application of jQuery

The adapter pattern is ideal for cross-browser compatibility, such as the powerful jQuery event-handling adapter, which solves cross-browser compatibility issues and greatly simplifies our daily programming operations.

// $('selector').on
function on(target, event, callback) {
    if (target.addEventListener) {
        // Standard event listener
        target.addEventListener(event, callback);
    } else if (target.attachEvent) {
        // Listen for events of earlier versions of IE
        target.attachEvent(event, callback)
    } else {
        // Lower version browser event listener
        target[`on${event}`] = callback
    }
}
Copy the code

Applicable scenario

  1. Cross-browser compatibility
  2. Integrate third-party SDKS
  3. Compatible with old and new interfaces

The original intention of adapter mode is to solve the problem of multi-object (interface) compatibility, if there are multiple objects working together, it is not convenient to directly modify the original object on the basis of, can consider using adapter encapsulation, so that external callers unified use.

Similarities and differences with other models

The adapter pattern does not change the original interface, similar to the decorator and proxy patterns.

VS Proxy mode

The adapter pattern is most similar to the proxy pattern in that, again, a new object is created (wrapped once) to implement the call to the ontology.

The difference between the two is that the proxy mode is to control the access of the original object (ontology). The original intention of the proxy is not to be compatible, and the external interface of the proxy and ontology should be consistent.

Adapters are compatible “converters” that do not process requests but direct them to the original interface, which may have a different name from the original interface.

“Agent mode” (Yan Father) : The school fees 1000 yuan, so much? “Adapter mode” (mother) : the school fees to 1000 pieces, to give to.

Decorator mode and appearance mode will be discussed here in a later chapter.

VS Decorator mode

Decorator mode is used to add functionality to an object, which can be added multiple times to form a chain of decorators. The adapter wraps the original object only once.

VS Appearance mode

The main difference between the facade pattern and the adapter pattern is that a new interface is defined.

The advantages and disadvantages

  • Advantages: Compatibility, to ensure that external unified interface call
  • Disadvantages: The creation of additional objects, indirect calls, some overhead (and performance optimization at some function points unlike the proxy pattern).

Refer to the article

  • JavaScript Design Patterns and Development Practices
  • Explanation and Application of JavaScript Design Pattern System
  • Adapters in JavaScript

Github is looking forward to Star! Github.com/ZengLingYon…

Author: in the name of music this article is original, there are inappropriate places welcome to point out. Reprint please indicate the source.