What is the adapter pattern

  • The adapter mode is used to solve the problem of the incompatibility of two interfaces. It does not need to change the existing interface, but realizes the normal cooperation of the two interfaces by packaging a layer. The adapter pattern can be used when we try to call an interface of a module or object and find that the format of the interface does not meet current requirements.

Adapter pattern life instance

  • Plug converter
  • A power outlet
  • The USB connector

Code sample

  1.Routine data processing, passing in the specified data and output the data format we expect according to the specified rulesconst arr = [{
    type: 'men'.quantity: 500}, {type: 'ladies'.quantity: 600}, {type: 'shoes'.quantity: 550
  }]
  const xAxisAdapter = (arr) = > {
    return arr.map(item= >item.type)
  } 
  const yAxisAdapter = (arr) = > {
    return arr.map(item= >item.quantity)
  }

  2.Event binding is compatible with all browsersfunction addEvent(ele, event, callback) {
    if (ele.addEventListener) {
      ele.addEventListener(event, callback)
    } else if(ele.attachEvent) {
      ele.attachEvent('on' + event, callback)
    } else {
      ele['on' + event] = callback
    }
  }

  3.Vue's calculated property <template><div id="app">
      <div>{{ reverseMsg }}</div>
    </div>
  </template>
  const vm = new Vue({
    el: '#app'.data() {
      return {
        msg: 'gfedcba'}},computed: {
      reverseMsg() {
        return this.msg.split(' ').reverse().join(' ')}}})Copy the code

Usage scenarios

  • Use an object that already exists, but whose methods or properties do not meet our requirements.
  • Unify the interface design of multiple classes
  • Adapt to different formats of data
  • Compatible with interfaces of earlier versions

The advantages and disadvantages

  • advantages
    • Interface or data transformation code can be separated from the main business logic of the program
    • If existing functionality is only interface incompatible, using adapters to adapt existing functionality allows better reuse of the original logic and helps avoid large-scale rewriting of existing code
    • Flexibility is good, the adapter does not affect the function of the original object, do not want to use the adapter directly delete the adapter code, will not use the original object code
  • disadvantages
    • Using too many adapters can clutter up the system and increase code complexity

Relationships to other patterns

  • The adapter pattern is primarily used to resolve mismatches between two existing interfaces, regardless of how those interfaces were implemented or how they might evolve in the future. The adapter pattern enables synergies without changing existing interfaces.
  • Decorator mode and proxy mode also do not change the interface of the original object, but the purpose of decorator mode is to add functionality to the object. The decorator pattern often forms a long chain of decorators, whereas the adapter pattern usually wraps once. The proxy pattern is designed to control access to objects and is usually wrapped only once.
  • A facade pattern is similar to an adapter. Some people think of the facade pattern as an adapter for a set of objects, but the most notable feature of the facade pattern is that it defines a new interface.