Le modèle de pont sépare la partie abstraite de la partie de mise en œuvre, afin que les deux puissent être modifiés indépendamment et peuvent fonctionner harmonieusement ensemble. La partie abstraite et la partie de mise en œuvre peuvent être modifiées indépendamment sans s'affaire, réduisant le couplage du code et améliorant l'évolutivité du code.
Selon la définition de GOF, le rôle du mode de pont est "d'isoler l'abstraction de sa mise en œuvre afin que les deux puissent changer indépendamment". Ce modèle est très avantageux à la programmation axée sur les événements commune en JavaScript.
L'une des applications les plus courantes et les plus pratiques du mode Bridge est la fonction de rappel des écouteurs d'événements. Exemple: écouteur d'événements, encapsule les instructions traitées par événement dans les fonctions de rappel et les programmes via des interfaces plutôt que des implémentations.
Théorie de base
Définition du modèle de pont: séparez les pièces abstraites de leurs pièces de mise en œuvre afin qu'elles puissent toutes être modifiées indépendamment.
Le mode Bridge se compose principalement de 4 rôles:
(1) classe abstraite
(2) élargir les classes abstraites
(3) implémenter l'interface de classe
(4) classe d'implémentation spécifique
Selon les caractéristiques de la langue javascript, nous la simplifions en 2 rôles:
(1) Développer les classes abstraites
(2) classe d'implémentation spécifique
Comment comprendre le mode Bridge? Donnons un exemple suivant
Implémentation du mode pont
La clé pour comprendre l'idée d'un modèle de pont est de comprendre son idée de séparer les parties abstraites et de réaliser des pièces. Donnons des exemples pour illustrer
Le mode de pont le plus simple
En fait, la fonction jQuery que nous utilisons le plus souvent est un mode de pont typique. Nous le simulons comme suit:
var chaque = fonction (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]; chacun (arr, fonction (i, v) {arr [i] = v * 2;})Dans cet exemple, nous boumons le tableau ARR via chaque fonction. Bien que cet exemple soit très courant, il contient un motif de pont typique.
Dans cet exemple, la partie abstraite est chaque fonction, qui est la classe abstraite élargie mentionnée ci-dessus, et la partie d'implémentation est FN, c'est-à-dire la classe d'implémentation concrète. La partie abstraite et la partie de mise en œuvre peuvent être modifiées indépendamment. Bien que cet exemple soit simple, il s'agit d'une application typique du mode pont.
Mode de pont dans le développement du plug-in
Un scénario approprié pour le mode de pont est le développement des composants. Afin de s'adapter à différentes occasions, les composants auront de nombreux changements dans différentes dimensions. Le mode de pont peut être appliqué ici, séparant son abstraction de la mise en œuvre, ce qui rend le composant plus extensible.
Supposons que nous voulons développer un plug-in pop-up, qui a différents types de fenêtres contextuelles: des rappels de messages ordinaires, des rappels d'erreur et la méthode d'affichage de chaque rappel est différente. Il s'agit d'un scénario de changement multidimensionnel typique. Nous définissons d'abord deux classes: fenêtre pop-up de message normal et fenêtre contextuelle du message d'erreur.
fonction messagealiog (animation) {this.animation = animation;} messagealiog.prototype.show = function () {this.animation.show ();} function errordialog (animation) {this.animation = animation;} errorDialog.prototype.show = fundeCes deux classes sont les parties abstraites mentionnées ci-dessus, c'est-à-dire les classes abstraites étendues, qui contiennent toutes deux une animation membre.
Les deux fenêtres contextuelles sont affichées via la méthode Show, mais les effets d'animation sont différents. Nous définissons deux classes d'effet d'affichage comme suit:
fonction lineranimation () {} lineranimation.prototype.show = function () {console.log ("il est liner");} fonction easEAnimation () {} easeAnimation.prototype.show = function () {console.log ("c'est facilité");}Ces deux classes sont des classes d'implémentation spécifiques, qui réalisent des effets d'affichage spécifiques. Alors, comment l'appelons-nous?
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ésumer
La clé pour apprendre le modèle de pont est de comprendre la séparation entre la partie abstraite et la partie de mise en œuvre, afin que les deux puissent être modifiés indépendamment sans être obsédé par la forme. Le plug-in JS a des changements flexibles et la variété des scénarios applicables est très adapté à l'utilisation de ce modèle à réaliser. La chose la plus importante à propos de l'utilisation d'un mode de pont est de découvrir les différentes dimensions du changement dans le système.
(1) Avantages du mode pont:
L'isolement de l'abstraction de la mise en œuvre aide à gérer indépendamment divers composants du logiciel.
(2) Inconvénients du mode Bridge:
Chaque élément de pont est utilisé pour ajouter un appel de fonction, ce qui a un impact négatif sur les performances de l'application. Augmente la complexité du système. Si une fonction de pont est utilisée pour connecter deux fonctions et que l'une des fonctions ne sera pas du tout appelée en dehors de la fonction de pont, la fonction de pont n'est pas nécessaire pour le moment.
Le mode de pont "isole l'abstraction de la mise en œuvre afin que les deux changent indépendamment". Il peut favoriser la modularité du code, conduire à une implémentation plus propre et améliorer la flexibilité abstraite. Il peut être utilisé pour connecter un ensemble de classes et de fonctions, et fournit un moyen d'accéder aux données privées avec des fonctions privilégiées.