Interprétation détaillée du modèle de pontage dans le développement de modèles de conception JavaScript (avancé)

Le mode pont est applicable à un large éventail de situations. En plus de faire le pont entre les fonctions de rappel d'événements et les interfaces, le mode pont peut également être utilisé pour connecter le code d'API publique et le code d'implémentation privé. Expliquons le modèle de conception JavaScript dans. détail. Le modèle de pont en cours de développement utilise le modèle de pont

pour séparer la partie abstraite de la partie implémentation afin que les deux puissent changer indépendamment et fonctionner harmonieusement ensemble. La partie abstraite et la partie implémentation peuvent être modifiées indépendamment sans s'affecter mutuellement, ce qui réduit le couplage du code et améliore l'évolutivité du code.
Selon la définition du GoF, le rôle du modèle de pont est "d'isoler l'abstraction de sa mise en œuvre afin que les deux puissent changer indépendamment". Ce modèle présente un grand avantage pour la programmation événementielle courante en Javascript.

L'une des applications les plus courantes et les plus pratiques du modèle de pont est la fonction de rappel de l'écouteur d'événement. Exemple : l'écouteur d'événements encapsule les instructions de traitement d'événements dans des fonctions de rappel et effectue la programmation via des interfaces plutôt que des implémentations.

Théorie de base

Définition du modèle de pont : Séparez la partie abstraite de sa partie implémentation afin qu'elles puissent changer indépendamment.
Le mode pont se compose principalement de 4 rôles :
(1) Classe abstraite
(2) Classe abstraite étendue
(3) Interface de classe d'implémentation
(4) Classe d'implémentation concrète
Selon les caractéristiques du langage JavaScript, nous le simplifions en deux rôles :
(1) Classe abstraite étendue
(2) Classe d'implémentation concrète
Comment comprendre le mode pont ? Nous donnerons ensuite un exemple de

mise en œuvre du mode pont

Pour comprendre l'idée du mode pont, la clé est de comprendre son idée de ​​séparant la partie abstraite et la partie implémentation. Illustrons par un exemple

Le mode pont le plus simple

En fait, chaque fonction de jQuery que nous utilisons le plus souvent est un mode pont typique Nous simulons son implémentation comme suit :

var each = function (arr, fn) {
  for (var i = 0; i < arr.length; i++) {
    var val = arr[i];
    if (fn.call(val, i, val, arr)) {
      return false;
    }
  }
}
var arr = [1, 2, 3, 4];
each(arr, function (i, v) {
  arr[i] = v * 2;
})

Dans cet exemple, nous parcourons le tableau arr à travers chaque fonction. Bien que cet exemple soit très courant, il contient le mode pont typique.
Dans cet exemple, la partie abstraite est each function, qui est la classe abstraite étendue mentionnée ci-dessus, et la partie implémentation est fn, qui est la classe d'implémentation concrète. La partie abstraite et la partie implémentation peuvent être modifiées indépendamment. Bien que cet exemple soit simple, il s’agit d’une application typique en mode pont.

Mode pont dans le développement de plug-ins

Un scénario applicable pour le mode pont est le développement de composants. Nous développons généralement des composants pour nous adapter à différentes occasions, et les composants changeront en conséquence dans de nombreuses dimensions différentes. Le modèle de pont peut être appliqué ici, séparant son abstraction et sa mise en œuvre, rendant le composant plus évolutif.
Supposons que nous souhaitions développer un plug-in de fenêtre pop-up. Il existe différents types de fenêtres pop-up : les rappels de messages ordinaires et les rappels d'erreurs. Chaque rappel est affiché de manière différente. Il s’agit d’un scénario typique de changement multidimensionnel. Nous définissons d’abord deux classes : la fenêtre contextuelle de message normal et la fenêtre contextuelle de message d’erreur.

function MessageDialog(animation) {
  this.animation = animation;
}
MessageDialog.prototype.show = function () {
  this.animation.show();
}
function ErrorDialog(animation) {
  this.animation = animation;
}
ErrorDialog.prototype.show = function () {
  this.animation.show();
}

Ces deux classes sont les parties abstraites mentionnées précédemment, c'est-à-dire des classes abstraites étendues. Elles contiennent toutes deux une animation membre.
Les deux fenêtres pop-up sont affichées via la méthode show, mais les effets d'animation affichés sont différents. Nous définissons deux classes d'effets d'affichage comme suit :

function LinerAnimation() {
}
LinerAnimation.prototype.show = function () {
  console.log("it is liner");
}
function EaseAnimation() {
}
EaseAnimation.prototype.show = function () {
  console.log("it is ease");
}

Ces deux classes sont des classes d'implémentation spécifiques, qui implémentent des effets d'affichage spécifiques. Alors, comment l’appelle-t-on ?

var message = new MessageDialog(new LinerAnimation());
message.show();
var error = new ErrorDialog(new EaseAnimation());
error.show();

Si nous voulons ajouter un effet d'animation, nous pouvons définir une autre classe d'effet et la transmettre.

Résumé

La clé pour apprendre le modèle de pont est de comprendre la séparation de la partie abstraite et de la partie mise en œuvre, afin que les deux puissent changer indépendamment sans être rigides. lié au formulaire. Les modifications flexibles des plug-ins JS et les scénarios applicables changeants sont très adaptés à la mise en œuvre de ce mode. La chose la plus importante dans l’utilisation du modèle de pont est d’identifier les différentes dimensions du changement dans le système.
(1) Avantages du mode pont : Isoler l'abstraction de l'implémentation permet de gérer chaque composant du logiciel de manière indépendante.
(2) Inconvénients du mode Bridge : Chaque fois qu'un élément de pont est utilisé, un appel de fonction est ajouté, ce qui aura un impact négatif sur les performances de l'application. Complexité accrue du système. Si une fonction pont est utilisée pour connecter deux fonctions et que l’une des fonctions n’est jamais appelée en dehors de la fonction pont, alors la fonction pont n’est pas nécessaire à ce stade.
Le modèle de pont "isole l'abstraction de la mise en œuvre afin qu'elles puissent changer indépendamment". Il favorise la modularité du code, permet des implémentations plus propres et augmente la flexibilité de l'abstraction. Il peut être utilisé pour connecter un groupe de classes et de fonctions entre elles et fournit un moyen d'accéder à des données privées à l'aide de fonctions privilégiées.

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

Articles connexes :

Utilisation de modèles de combinaison dans les modèles de conception dans la construction de programmes JavaScript (avancé)

Explication détaillée dans Méthodes pour implémenter le modèle d'adaptateur dans les modèles de conception en JavaScript (tutoriel graphique)

Tutoriel sur l'utilisation du modèle de combinaison dans le développement de modèles de conception JavaScript (avancé)

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!