Une brève introduction au modèle d'adaptateur de modèles de conception JavaScript

Modèle d'adaptateur (Adapter)

Le modèle d'adaptateur est principalement utilisé pour résoudre le problème de non-concordance entre deux interfaces existantes. Il ne prend pas en compte la manière dont ces interfaces sont implémentées. , sans considérer comment ils pourraient évoluer dans le futur. Le modèle d'adaptateur permet aux interfaces existantes de fonctionner ensemble sans les modifier.

Un alias pour un adaptateur est wrapper (wrapper), qui est un modèle relativement simple. Il existe de nombreux scénarios dans le développement de programmes : lorsque l'on tente d'appeler une interface d'un module ou d'un objet, on constate que le format de cette interface ne répond pas aux besoins actuels. Il existe actuellement deux solutions : la première consiste à modifier l'implémentation de l'interface d'origine. Cependant, si le module d'origine est très complexe, ou si le module que nous obtenons est un code compressé écrit par quelqu'un d'autre, modifier l'interface d'origine n'est pas réaliste. . La deuxième méthode consiste à créer un adaptateur pour convertir l'interface d'origine en une autre interface souhaitée par le client. Le client n'a qu'à s'occuper de l'adaptateur.

Il existe de nombreux exemples d'adaptateurs dans la réalité : prises de courant, adaptateurs USB, etc. ; par exemple, la prise casque de l'iPhone 7 est passée d'une interface à trou rond de 3,5 mm à l'interface Lightning exclusive d'Apple. De nombreuses personnes ont besoin d'un adaptateur ci-dessous pour leurs anciens écouteurs ronds afin d'écouter de la musique sur leur iPhone nouvellement acheté.

2. Scénarios d'utilisation du mode adaptateur

2.1 Adaptation de l'interface

Lorsque nous appliquons à googleMap 和baiduMap都发出“显示”请求时，googleMap和baiduMap` affiche la carte sur la page à sa manière

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);  // 输出：开始渲染百度地图

La clé du bon fonctionnement de ce programme est que googleMap et baiduMap fournissent la même show méthode, mais la Les méthodes d'interface des trois parties ne sont pas sous notre propre contrôle. Et si la méthode d'affichage de la carte fournie par baiduMap n'était pas appelée show mais appelée display ?

baiduMap Cet objet provient d'un tiers. Dans des circonstances normales, nous ne devrions pas le modifier, et parfois nous ne pouvons pas le modifier. À ce stade, nous pouvons résoudre le problème en ajoutant 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 des paramètres

Dans certains cas, une méthode peut devoir transmettre plusieurs paramètres, par exemple, lors de la surveillance de certains SDK signalés, de nombreuses données peuvent être collectées. Il y a un systemInfo dans cette classe, et cinq paramètres doivent être transmis pour recevoir des informations pertinentes sur le téléphone mobile :

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

<.> est généralement transmis. Lorsque les paramètres sont supérieurs à 3, nous pouvons envisager de fusionner les paramètres en un seul objet, tout comme ce que nous avons fait avec

. Ci-dessous, nous pouvons définir l'interface des paramètres de $.ajax comme suit (String représente le type de paramètre, systemInfo représente facultatif) ?:

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

On peut voir que les trois attributs de l'opérateur, de la langue et du réseau ne le font pas doivent être transmis Entré, ils peuvent être définis sur certaines valeurs par défaut à l'intérieur de la méthode. Donc à ce stade, nous pouvons utiliser un adaptateur à l’intérieur de la méthode pour nous adapter à cet objet paramètre. Cette méthode est courante dans nos plug-ins ou packages npm ;

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 Adaptation des données

L'adaptation des données est le scénario le plus courant dans le front-end. résoudre les dépendances de données entre le front-end et le back-end. Habituellement, les données transmises par le serveur ne correspondent pas au format de données que nous devons utiliser sur le front-end. Surtout lors de l'utilisation de certains frameworks d'interface utilisateur, les données spécifiées par le framework ont ​​un format fixe. Par conséquent, nous devons actuellement adapter le format des données back-end.

Par exemple, il y a un uv hebdomadaire sur le site Web utilisant le graphique linéaire Echarts. Habituellement, le format de données renvoyé par le backend est le suivant :

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

Mais Echarts nécessite des données sur l'axe des x. Le format et les données des points de coordonnées sont les suivants :

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

Nous pouvons donc utiliser un adaptateur pour adapter les données de retour du back-end :

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

3 Résumé

Le modèle d'adaptateur est une paire de modèles relativement simples. Cependant, le modèle d'adaptateur a de nombreux scénarios d'utilisation dans JS. En termes d'adaptation des paramètres, de nombreuses bibliothèques et frameworks utilisent le modèle d'adaptateur. L'adaptation des données est très importante pour résoudre les dépendances de données front-end et back-end. Ce que nous devons comprendre, c'est que le mode adaptateur est essentiellement un mode de « rattrapage ». Il résout le problème d'incompatibilité entre les deux interfaces existantes. Vous ne devez pas utiliser ce mode au début du développement du logiciel ; Dès le début de la conception, nous pouvons prévoir la cohérence de l'interface dans son ensemble, l'adaptateur doit donc être utilisé le moins possible.

Les adaptateurs en JavaScript sont davantage utilisés entre les objets. Afin de rendre l'objet utilisable, nous divisons et réassemblons généralement l'objet, nous devons donc comprendre la structure interne de l'objet adaptatif, qui est également la différence entre Le mode d'apparition est, bien sûr, que le mode d'allocation résout également le couplage entre les objets. Le code d'adaptation packagé augmente une certaine consommation de ressources, mais celle-ci est minime.

Articles connexes :

Modèles de conception (adaptateurs)

Série de modèles de conception JavaScript 5 : modèle d'adaptateur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!