Résumé de l'application du modèle d'adaptateur Adapter dans la programmation de modèles de conception JavaScript (tutoriel graphique)

Le modèle d'adaptateur est utilisé pour résoudre le problème d'incompatibilité d'interface entre deux entités logicielles. Il est couramment utilisé en JavaScript, en particulier en AJAX. Examinons ensuite l'analyse d'application du modèle d'adaptateur d'adaptateur dans la programmation de modèles de conception JavaScript.

Définition
Le modèle d'adaptateur (Adapter) consiste à convertir l'interface (méthode ou attribut) d'une classe (objet) en une autre interface (méthode ou attribut) souhaitée par le client . Le modèle d'adaptateur rend l'original. Les classes (objets) qui ne fonctionnent pas ensemble en raison d'interfaces incompatibles peuvent fonctionner dans une certaine mesure. Emballage instantané.

Un alias pour un adaptateur est wrapper, qui est un modèle relativement simple. Il existe de nombreux scénarios de développement de programme : 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.

Pourquoi devons-nous utiliser le mode adaptateur ?
Lors du développement d'une application, vous devrez souvent en remplacer une partie, par exemple une bibliothèque que vous utilisez pour sauvegarder les journaux ou quelque chose de ce genre. Lorsque vous la remplacez par une nouvelle bibliothèque, il est peu probable que celle-ci ait exactement la même interface. À partir de là, vous avez deux options :
(1) Parcourez tout votre code et modifiez tout ce qui pointe vers l'ancienne bibliothèque.
(2) Créez un adaptateur pour que la nouvelle bibliothèque puisse utiliser la même interface que l'ancienne bibliothèque.
Évidemment, dans certains cas, si votre application est petite ou comporte peu de références à l'ancienne bibliothèque, il est plus approprié de parcourir le code complet et de le modifier pour qu'il corresponde à la nouvelle bibliothèque, plutôt que d'ajouter une nouvelle couche A. d'abstraction qui rend le code plus complexe. Cependant, dans la plupart des cas, il est plus pratique et plus rapide de créer un adaptateur.

Exemple de code JavaScript

Quand quelque chose peut arriver, cela arrivera. Jetons d'abord un coup d'œil à cette petite LoggerFactory, qui nous permet de modifier plus facilement l'interface de journalisation que nous utilisons.

var LoggerFactory = {
  getLogger: function() {
    return window.console;
  },
  ...
};

/* 用法示例 */
var logger = LoggerFactory.getLogger();
logger.log("something to log");

Il nous renvoie l'objet console (console) lorsque nous appelons getLogger. Pour les besoins de cet exercice, nous allons faire comme si l'objet console n'avait qu'une seule méthode, log, et qu'il ne pouvait accepter qu'un seul paramètre de type string. Ensuite, nous avons une autre interface de journalisation, qui sera plus compliquée car 1) elle est implémentée en JavaScript et n'est pas native du navigateur comme la console ; 2) elle enverra le journal au serveur via AJAX, ce qui signifie également que nous devons encoder les données URL (le code n'implémentera pas spécifiquement l'encodage URL, car il n'a rien à voir avec le modèle d'adaptateur dont nous allons parler). Bien entendu, il utilisera une interface différente de celle de la console.

var AjaxLogger = {
  sendLog: function() {
    var data = this.urlEncode(arguments);

    jQuery.ajax({
      url: "http://example.com/log",
      data: data
    });
  },

  urlEncode: function(arg) {
    ...
    return encodedData;
  },
  ...
};

Nous utilisons la requête AJAX de jQuery, principalement pour gagner du temps et ignorer les choses que nous ne voulons pas faire avec le modèle d'adaptateur. Ce que nous devons faire maintenant est de créer un adaptateur et de modifier le LoggerFactory précédent pour renvoyer cet adaptateur au lieu de l'objet console.

var AjaxLoggerAdapter = {
  log: function(arg) {
    AjaxLogger.sendLog(arg);
  }
};

/* 调整 LoggerFactory */

var LoggerFactory = {
  getLogger: function() {
    // 改变返回值
    return AjaxLoggerAdapter;
  },
  ...
};

Nous n'avons modifié qu'une seule ligne du code existant, et l'ensemble du programme peut utiliser cette nouvelle interface de journalisation.

Adaptateur complexe

L'interface de journalisation est un exemple très simple. Elle n'a qu'une seule méthode, et il n'est pas difficile de la mapper directement à l'ancienne méthode. Dans la plupart des cas, ce n'est pas le cas. Vous pouvez rencontrer le problème que les paramètres de ces fonctions mappées les unes aux autres sont complètement différents. L'ancienne interface peut ne pas avoir ces paramètres du tout et vous devez les gérer vous-même. Dans certains cas, vous devez supprimer certains paramètres car la nouvelle interface ne les utilise tout simplement pas. Si le mappage d'interface entre deux objets est trop difficile, nous devons penser à d'autres moyens. Quoi qu'il en soit, je ne veux pas retrouver et modifier des milliers de lignes d'ancien code.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Connaissances sur les types JavaScript, nuls et non définis

Objet booléen JavaScript Connaissances et utilisation associées

JavaScript Date (date) Connaissances et utilisation associées

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!