A brief introduction to JavaScript design patterns adapter pattern

Adapter mode (Adapter)

The adapter mode is mainly used to solve the problem of mismatch between two existing interfaces. It does not consider how these interfaces are implemented. , without considering how they might evolve in the future. The adapter pattern enables existing interfaces to work together without changing them.

The alias of the adapter is wrapper (wrapper), which is a relatively simple pattern. There are many scenarios in program development: when we try to call an interface of a module or object, we find that the format of the interface does not meet the current needs. There are two solutions at this time. The first is to modify the original interface implementation. However, if the original module is very complex, or the module we get is a compressed code written by someone else, modifying the original interface is not realistic. . The second method is to create an adapter to convert the original interface into another interface that the customer wants. The customer only needs to deal with the adapter.

There are many examples of adapters in reality: power sockets, USB adapters, etc.; for example, the headphone jack after iPhone 7 has changed from a 3.5mm round hole interface to Apple’s exclusive lightning interface. Many people need an adapter below for their previous round-hole headphones to listen to music on their newly purchased iPhone.

2. Adapter mode usage scenario

2.1 Interface adaptation

When we apply to googleMap and baiduMapWhen both issue "display" requests, googleMap and baiduMap` display the map on the page in their own ways

const googleMap = {
  show: function () {
    console.log('开始渲染谷歌地图');
  }
};const baiduMap = {
  show: function () {
    console.log('开始渲染百度地图');
  }
};const renderMap = function (map) {
  if (map.show instanceof Function) {
    map.show();
  }
};

renderMap(googleMap); // 输出：开始渲染谷歌地图renderMap(baiduMap);  // 输出：开始渲染百度地图

The key to the smooth operation of this program is googleMap and baiduMap provide the same show method, but the third-party interface method is not within our own control. If baiduMap The method provided to display the map is not called show but called display?

baiduMap This object comes from a third party. Under normal circumstances, we should not change it, and sometimes we cannot change it. At this time we can solve the problem by adding baiduMapAdapter:

const googleMap = {
  show: function () {
    console.log('开始渲染谷歌地图');
  }
};const baiduMap = {
  display: function () {
    console.log('开始渲染百度地图');
  }
};const baiduMapAdapter = {
  show: function(){
    return baiduMap.display();
  }
};

renderMap(googleMap);       // 输出：开始渲染谷歌地图renderMap(baiduMapAdapter); // 输出：开始渲染百度地图

2.2 Adaptation of parameters

In some cases, a method may need to pass in multiple parameters, for example When doing some monitoring and reporting SDK, a lot of data may be collected. There is a systemInfo in this class, and five parameters need to be passed in to receive relevant information about the mobile phone:

class SDK {
  systemInf(brand, os, carrier, language, network) {    //dosomething.....
  }
}

Usually when the incoming parameters are greater than 3, we can consider merging the parameters into one object, just like what we do in $.ajax. Below we can define the parameter interface of systemInfo as follows (String represents the parameter type, ?: represents the optional option)

{
  brand: String
  os: String
  carrier:? String
  language:? String
  network:? String}

As can be seen, carrier, language, network These three properties do not have to be passed in, they may be set to some default values ​​inside the method. So at this time we can use an adapter inside the method to adapt to this parameter object. This method is common in our plug-ins or npm packages;

class SDK {
  systemInf(config) {    let defaultConfig = {
      brand: null,  //手机品牌
      os: null, //系统类型： Andoird或 iOS
      carrier: 'china-mobile', //运营商，默认中国移动
      language: 'zh', //语言类型，默认中文
      network: 'wifi', //网络类型，默认wifi
    }    //参数适配
    for( let i in config) {
      defaultConfig[i] = config[i] || defaultConfig[i];
    }    //dosomething.....
  }
}

2.3 Data Adaptation

Data adaptation is the most common scenario in the front end. At this time, the adapter is It is of great significance to solve the data dependence of front-end and back-end. Usually the data passed by the server is inconsistent with the data format we need to use on the front end. Especially when using some UI frameworks, the data specified by the framework has a fixed format. Therefore, at this time we need to adapt the back-end data format.

For example, there is a weekly uv on the website using Echarts line chart. Usually the data format returned by the backend is as follows:

[
  {    "day": "周一",    "uv": 6300
  },
  {    "day": "周二",    "uv": 7100
  },  {    "day": "周三",    "uv": 4300
  },  {    "day": "周四",    "uv": 3300
  },  {    "day": "周五",    "uv": 8300
  },  {    "day": "周六",    "uv": 9300
  }, {    "day": "周日",    "uv": 11300
  }
]

But the x-axis data format required by Echarts is as follows: The coordinate point data looks like this:

["周二", "周二", "周三"， "周四"， "周五"， "周六"， "周日"] //x轴的数据[6300. 7100, 4300, 3300, 8300, 9300, 11300] //坐标点的数据

So we can use an adapter to adapt the back-end return data:

//x轴适配器function echartXAxisAdapter(res) {
  return res.map(item => item.day);
}//坐标点适配器function echartDataAdapter(res) {
  return res.map(item => item.uv);
}

3 Summary

Adapter pattern is a pair of relatively simple patterns. However, the adapter pattern has many usage scenarios in JS. In terms of parameter adaptation, many libraries and frameworks use the adapter pattern; data adaptation is very important in solving front-end and back-end data dependencies. What we need to realize is that the adapter mode is essentially a "make up for it" mode. It solves the problem of incompatibility between the two existing interfaces. You should not use this mode in the early development stage of the software; if At the beginning of the design, we can plan the consistency of the interface as a whole, so the adapter should be used as little as possible.

Adapters in JavaScript are more used between objects. In order to make the object available, we usually split and reassemble the object, so we must understand the internal structure of the adapting object, which is also the The difference between appearance mode is, of course, that the allocation mode also solves the coupling between objects. The packaged adaptation code increases some resource consumption, but this is minimal.

Related articles:

Design Pattern (Adapter)

JavaScript Design Pattern Series Five: Adapter Pattern

The above is the detailed content of A brief introduction to JavaScript design patterns adapter pattern. For more information, please follow other related articles on the PHP Chinese website!