Explication détaillée de la façon d'implémenter le modèle d'adaptateur dans les modèles de conception en JavaScript (tutoriel graphique)

Le modèle d'adaptateur peut convertir (ou ajuster) une interface en fonction des besoins, créer un autre objet contenant l'interface dont vous avez besoin et le connecter à l'objet dont vous souhaitez modifier l'interface pour terminer cette conversion. Expliquons JavaScript en détail ci-dessous. Méthodes d'implémentation du modèle d'adaptateur dans les modèles de conception

Parfois, au cours du processus de développement, nous constaterons que l'interface requise par le client est incompatible avec l'interface fournie. Pour des raisons particulières, nous ne pouvons pas modifier l'interface client. Dans ce cas, nous devons adapter les interfaces existantes et les classes incompatibles, ce qui nous amène au modèle d'adaptateur. Grâce aux adaptateurs, nous pouvons les utiliser sans modifier l'ancien code. C'est le pouvoir des adaptateurs.
Le mode d'adaptation peut être utilisé pour s'adapter entre des interfaces existantes et des classes incompatibles. Les objets utilisant ce mode sont également appelés wrappers car ils enveloppent un autre objet avec une nouvelle interface.
En surface, le motif de l'adaptateur ressemble beaucoup au motif de façade. Ils enveloppent tous d’autres objets et modifient l’interface qu’ils présentent. La différence entre les deux réside dans la façon dont ils modifient l’interface. Les éléments de façade présentent une interface simplifiée qui n'offre aucune option supplémentaire et fait parfois des hypothèses afin de faciliter la réalisation de tâches courantes. L'adaptateur convertit une interface en une autre interface. Il ne filtre pas certaines fonctionnalités et ne simplifie pas l'interface. Si l'API du système client n'est pas disponible, un adaptateur est requis.

Théorie de base

Modèle d'adaptateur : convertir une interface en interface requise par le client sans modifier le code client, afin que les codes incompatibles puissent fonctionner ensemble.

L'adaptateur se compose principalement de trois rôles :
(1) Client : la classe qui appelle l'interface
(2) Adaptateur : la classe utilisée pour connecter l'interface client et l'interface qui fournit des services
(3) Adaptateur : fournit des services, mais la classe de service est incompatible avec les exigences de l'interface client.

Mise en œuvre du modèle d'adaptateur

1. L'adaptateur le plus simple

Le modèle d'adaptateur ne laisse aucune trace. imagination C'est tellement compliqué, prenons l'exemple le plus simple.
Le client appelle une méthode pour effectuer des calculs d'addition :

var result = add(1,2);

Mais nous ne fournissons pas la méthode add Nous fournissons la méthode sum avec la même fonction :

function sum(v1,v2){
  return v1 + v2;
}

Afin d'éviter les modifications Côté client et serveur, nous ajoutons une fonction wrapper :

function add (v1,v2){
  reutrn sum(v1,v2);
}

Il s'agit du modèle d'adaptateur le plus simple. Nous ajoutons une méthode wrapper entre deux interfaces incompatibles et utilisons cette méthode pour connecter The. deux le font fonctionner ensemble.

2. Application pratique

Avec le développement des frameworks front-end, de plus en plus de développeurs commencent à utiliser le framework MVVM pour le développement, qui n'a besoin que de fonctionner données sans Lors de la manipulation d'éléments DOM, jQuery devient de moins en moins utile. De nombreux projets font encore référence à la bibliothèque jQuery en tant que classe d'outils, car nous devons utiliser l'ajax fourni par jQuery pour demander des données au serveur. Si le rôle de jQuery dans le projet est uniquement celui d'une bibliothèque d'outils ajax, cela revient à tuer un poulet avec un outil puissant, ce qui entraîne un gaspillage de ressources. À l’heure actuelle, nous pouvons encapsuler complètement notre propre bibliothèque ajax.
Supposons que l'ajax que nous encapsulons soit utilisé via une fonction :

ajax({
  url:'/getData',
  type:'Post',
  dataType:'json',
  data:{
    id:"123"
  }
})
.done(function(){})

À l'exception de la différence entre l'interface appelante ajax et le $.ajax de jQuery, tout le reste est exactement le même.
Il doit y avoir de nombreux endroits demandant ajax dans le projet. Quand on remplace jQuery, il est impossible de modifier $.ajax un par un Alors que doit-on faire à ce moment-là, on peut ajouter un adaptateur :

var $ = {
  ajax:function (options){
    return ajax(options);
  }
}

De cette manière, il peut être compatible avec l'ancien code et les nouvelles interfaces, et éviter la modification du code existant.

Résumé

Le principe du pattern adaptateur est très simple, qui consiste à ajouter une nouvelle classe de packaging pour envelopper la nouvelle interface pour s'adapter à l'appel de l'ancienne code et évitez de modifier l’interface et le code d’appel.
Scénarios applicables : il existe de nombreux codes appelant d'anciennes interfaces. Afin d'éviter de modifier les anciens codes et de remplacer de nouvelles interfaces, les scénarios d'application n'affectent pas les méthodes d'implémentation existantes.

1. Occasions applicables du mode adaptateur : L'adaptateur convient aux situations où l'interface attendue par le système client est incompatible avec l'interface fournie par l'API existante. Les deux méthodes adaptées par l'adaptateur doivent effectuer des tâches similaires, sinon le problème ne sera pas résolu. Tout comme les éléments de pont et les éléments de façade, en créant un adaptateur, vous pouvez isoler une abstraction de son implémentation afin que les deux puissent changer indépendamment.

2. Avantages du modèle d'adaptateur : Utiliser une nouvelle interface pour envelopper l'interface d'une classe existante, afin que le programme client puisse utiliser cette classe qui n'est pas faite sur mesure pour lui. Aucune intervention chirurgicale majeure n’est nécessaire pour cela.

3. Inconvénients du modèle d'adaptateur : Certaines personnes pensent que les adaptateurs représentent une surcharge inutile et peuvent être évités en réécrivant le code existant. En outre, le modèle d'adaptateur introduira également un certain nombre de nouveaux outils qui doivent être pris en charge. Si l'API existante n'est pas encore finalisée, ou si la nouvelle interface n'est pas encore finalisée, l'adaptateur risque de ne pas toujours fonctionner.
Dans les cas impliquant de grands systèmes et des frameworks existants, ses avantages l'emportent souvent sur ses inconvénients.

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

Articles associés :

Implémentation de la composition de JavaScript (interprétation détaillée de BOM et DOM)

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

L'utilisation et la différence entre some() et filter() dans Tableaux JavaScript (Code ci-joint)

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!