What is the adapter pattern

I also read a lot of information on the Internet, want to get JS design mode, found that look in the clouds, may be their level is not deep enough. Recently I looked at the adapter pattern. We find that we use a lot of work in fact, but never to pay attention to what is the pattern

  • So what exactly is the adapter pattern?
The Adapter pattern converts the interface (method or property) of one class (object) into another interface (method or property) that the customer expects. The Adapter pattern makes it possible for classes (object) that would otherwise not work together due to incompatible interfaces to work. Also known as wrappers.Copy the code

First look at a paragraph of text, a little difficult to understand, thought what this is writing, the heart ten thousand horses galloping. Let’s take a look at the above text description for example, you may understand:

Recently bought a new mobile phone, sitting in the car suddenly want to listen to music, because I am a little carsick, hope to distraction by listening to music, get out before going to plug in the mobile phone headsets, seek along while, I brush, that what the devil, no headphone jack, how is that listening to music, then ask the customer service (customer affirmation in ten thousand eyes), please forgive me is mobile phone small white, Originally, the place where I bought the mobile phone to listen to music is the place to charge, is to plug in the earphone with typeC interface, but now I do not have this kind of earphone, so I tactfully bought the following adapter on a treasure, plug in my original earphone, I can listen to music happily, so happy ah.

Seeing this, I think you also know that my original earphone is not compatible with my current phone, and I need a adapter to use my original earphone again.

Implementation of adapter code

Here is a piece of code that implements the above example

// typeTypec class Cellular{charge() {return 'typec earhole'}} // Adaptor class Adaptor{constructor(){
       this.Cellular = new Cellular()
   }
   charge() {let v = this.Cellular.charge() 
       return `${v}=> Headset round hole '}} // Then you can use class Headset{constructor(){
       this.Adaptor = new Adaptor()
   }
   use(){
       console.log(this.Adaptor.charge())
   }
}
let headset = new Headset()
headset.use()
Copy the code

Scenarios for adapter applications?

In normal development, we may encounter situations where we try to call the interface of a module or object, only to find that the interface format does not meet our requirements. There are two solutions: the first is to modify the original interface implementation, but if the original code is complex, such as a library or framework, changing the original code may not be practical. This is where the second option, described today, comes in: create an adapter that converts the original interface into another interface that the customer wants, and the customer just needs to use the adapter.

For example, we need to request back-end data, but our default request method is GET request, but the back-end uses POST request, and the data format returned by the back-end is string, but we need object type data, so the front end needs to do compatibility processing

  • Adaptation of request parameters
  • ADAPTS data returned from the back end
function ajax(options){
    let defaultOptions = {
        methods:'GET',
        dataType:'json'
    }
    
    for(let attr inThe options) {/ / here do to request parameter adaptation defaultOptions = [attr] options/attr | | defaultOptions [attr]}}function transform(str){
    return JSON.parse(str)
}
ajax({
    url:'http://www.baidu.com',
    methods:'post', success(STR){// The server returns a pure JSON string // we can convert it to the format we wantlet result = transform(str)
    }
})


Copy the code
  • References Rethinking the JavaScript design pattern from ES6: the adapter pattern