L'application du modèle d'apparence de façade dans les modèles de conception en développement JavaScript (avancé)

Le modèle d'apparence simplifie l'interaction entre le client et le sous-système en introduisant un rôle d'apparence, fournit une entrée unifiée pour les appels de sous-système complexes et réduit le couplage entre le sous-système et le client. Examinons ensuite le modèle de conception. Application du mode d'apparence de façade dans le développement JavaScript

Concept

Le mode façade (mode façade) est un mode relativement simple et omniprésent. Le modèle d'apparence fournit une interface de haut niveau qui facilite l'appel des clients ou des sous-systèmes.

Le modèle de façade n'est pas un modèle d'adaptateur. Le modèle d'adaptateur est un wrapper qui adapte une interface afin qu'elle puisse être utilisée dans des systèmes incompatibles. Créer des éléments d'apparence est une commodité. Il n'est pas utilisé dans le but de traiter des systèmes clients nécessitant une interface spécifique, mais pour fournir une interface simplifiée.

Exemple de code JavaScript

Utilisez un simple morceau de code pour exprimer

var getName = function(){
 return ''svenzeng"
}
var getSex = function(){
  return 'man'
}

Si vous devez appeler les fonctions getName et getSex séparément. Ensuite, il peut être appelé à l'aide d'une interface de niveau supérieur getUserInfo.

var getUserInfo = function(){
 var info = a() + b();
 return info;
}

Vous vous demanderez peut-être pourquoi le code de getName et getSex n'a pas été écrit ensemble au début, comme celui-ci

var getNameAndSex = function(){
 return 'svenzeng" + "man";
}

Réponse Il est évident que le chef sauté de la cantine ne fera pas sauter les deux plats dans la même marmite simplement parce que vous avez commandé un morceau de canard rôti et un morceau de chou. Il préfère vous proposer un set de riz au canard rôti. Également en programmation, nous devons nous assurer que les fonctions ou les objets ont autant que possible une granularité raisonnable. Après tout, tout le monde n'aime pas manger du canard rôti et n'aime pas aussi manger du chou.
Un autre avantage du mode apparence est qu'il peut cacher les véritables détails de mise en œuvre aux utilisateurs, qui ne se soucient que de l'interface de plus haut niveau. Par exemple, dans l'histoire du riz au canard rôti, peu importe si le chef cuisine d'abord le canard rôti ou le chou en premier, et peu importe où le canard a été cultivé.
Enfin, écrivons un exemple de modèle d'apparence que nous avons tous utilisé

var stopEvent = function( e ){  //同时阻止事件默认行为和冒泡
 e.stopPropagation();
 e.preventDefault();
}

Je sais que le concept de modèle d'apparence est facile à comprendre. Vous n'avez pas nécessairement besoin d'un exemple de code JavaScript, mais il y a toujours des gens qui s'en soucient davantage, vous trouverez plus facile à comprendre de cette façon. De plus, les articles JavaScript sans exemples de code ne sont tout simplement pas convaincants et doivent être supprimés du Web. Commençons par un exemple simple d'écouteur d'événement. Tout le monde sait que l'ajout d'un écouteur d'événements n'est pas une tâche facile, à moins que vous ne souhaitiez que le code s'exécute sur quelques navigateurs. Vous devez tester beaucoup de choses pour vous assurer que votre code fonctionne correctement pour différents navigateurs. Dans cet exemple de code, nous ajoutons simplement la détection de fonctionnalités à cette méthode :

function addEvent(element, type, func) {
  if (window.addEventListener) {
    element.addEventListener(type, func, false);
  }
  else if (window.attachEvent) {
    element.attachEvent('on'+type, func);
  }
  else {
    element['on'+type] = func;
  }
}

Facile ! J'aimerais vraiment pouvoir arrêter d'écrire du code inutile et le rendre aussi simple que possible, mais si tel était le cas, ce ne serait pas intéressant et vous ne voudriez pas continuer à lire, n'est-ce pas ? Donc je ne pense pas, je pense que je vais vous montrer quelque chose d'un peu plus compliqué. Je voulais juste dire que ton code aurait ressemblé un peu à ça :

var foo = document.getElementById('foo');
  foo.style.color = 'red';
  foo.style.width = '150px';

var bar = document.getElementById('bar');
  bar.style.color = 'red';
  bar.style.width = '150px';

var baz = document.getElementById('baz');
  baz.style.color = 'red';
  baz.style.width = '150px';

C'est nul ! Vous faites exactement la même chose pour chaque élément ! Je pense qu'on peut faire plus simple :

function setStyle(elements, property, value) {
  for (var i=0, length = elements.length; i < length; i++) {
    document.getElementById(elements[i]).style[property] = value;
  }
}

// 现在你可以这么写：
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;color&#39;, &#39;red&#39;);
setStyle([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], &#39;width&#39;, &#39;150px&#39;);

Vous pensez que notre NB est cassé ? Oubliez ça ! Nous sommes des programmeurs JavaScript ! Pouvez-vous utiliser votre cerveau et être sérieux ? Peut-être pourrions-nous définir tous les styles en un seul appel. Jetez un oeil à ceci :

function setStyles(elements, styles) {
  for (var i=0, length = elements.length; i < length; i++) {
    var element = document.getElementById(elements[i]);

    for (var property in styles) {
      element.style[property] = styles[property];
    }
  }
}

//现在你只要这样写：
setStyles([&#39;foo&#39;, &#39;bar&#39;, &#39;baz&#39;], {
  color: &#39;red&#39;,
  width: &#39;150px&#39;
});

Si nous avons de nombreux éléments pour lesquels nous voulons définir le même style, ce code nous fait vraiment gagner beaucoup de temps.

Avantages du mode Apparence : Le but de l'utilisation du mode Apparence est de faciliter la vie des programmeurs. Écrivez le code combiné une fois, puis utilisez-le à plusieurs reprises, ce qui permet d'économiser du temps et des efforts. . Fournit une interface simplifiée pour certains problèmes complexes.

La méthode d'apparence est pratique pour les développeurs. Elle fournit des fonctions de niveau supérieur, réduit la dépendance au code externe et ajoute une flexibilité supplémentaire au développement de systèmes d'application. En utilisant le modèle de façade, vous pouvez éviter un couplage étroit avec les sous-systèmes sous-jacents. Cela permet d'apporter des modifications au système sans affecter le code client.

Inconvénients du mode apparence : Parfois, les éléments d'apparence apportent également une charge supplémentaire inutile. Vous devez soigneusement peser le caractère pratique de certaines routines avant de les mettre en œuvre. Parfois, la force d’une fonction de composant est plus attrayante qu’une fonction d’apparence complexe. En effet, les fonctions de façade peuvent souvent effectuer des tâches dont vous n'avez pas besoin.

Pour un simple site Web personnel ou un petit nombre de pages marketing, il n'est peut-être pas judicieux d'importer cette bibliothèque Javascript juste pour une petite amélioration telle que des info-bulles et des pop-ups. À ce stade, envisagez d’utiliser seulement quelques éléments d’apparence simples plutôt qu’une bibliothèque pleine d’entre eux.

Les fonctions de façade fournissent une interface simple pour effectuer diverses tâches complexes et facilitent la maintenance et la compréhension du code. Ils relâchent également le couplage entre les sous-systèmes et le code client. Regroupez les fonctions communes qui apparaissent souvent ensemble. Ce mode est couramment utilisé dans des environnements tels que les scripts DOM qui doivent gérer des interfaces de navigateur incohérentes.

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

Articles connexes :

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 image et texte)

Explication détaillée du flux d'événements et du gestionnaire d'événements en JavaScript ( image Tutoriel texte)

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

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!