concept
Le mode d'apparence (mode façade) est un mode relativement simple et omniprésent. Le mode d'apparence fournit une interface de haut niveau, ce qui facilite l'appel des clients ou des sous-systèmes.
Le mode d'apparence n'est pas le mode adaptateur, un mode adaptateur est un wrapper pour adapter l'interface pour l'utiliser dans un système incompatible. Créer des éléments d'apparence est une commodité. Il n'est pas utilisé pour traiter les systèmes clients qui nécessitent des interfaces spécifiques, mais pour fournir une interface simplifiée.
Exemples de code javascript
Utilisez un morceau de code simple pour l'exprimer
var getName = function () {return '' svenzeng "} var getSEx = function () {return 'man'}Si vous devez appeler respectivement les fonctions GetName et GetSEX, vous pouvez utiliser une interface de niveau supérieur GetUserInfo pour l'appeler.
var getUserInfo = function () {var info = a () + b (); retour des informations;}Peut-être que vous vous demanderez pourquoi vous n'avez pas écrit le code getName et GetSex au début, par exemple
var getNameAndSex = function () {return 'Svenzeng "+" man ";}La réponse est évidente. Les chefs de cuisine de la cantine ne feront pas frire ces deux plats dans le même pot juste parce que vous avez réservé un canard rôti et un chou. Il préfère vous fournir un repas défini de riz de canard rôti. En programmation également, nous devons nous assurer que les fonctions ou les objets sont autant que possible à une granularité raisonnable. Après tout, tout le monde n'aime pas manger du canard rôti et aime aussi manger du chou.
Un autre avantage du mode d'apparence est qu'il peut masquer les détails de l'implémentation réels des utilisateurs, et les utilisateurs ne se soucient que de l'interface de plus haut niveau. Par exemple, dans l'histoire du repas de riz de canard rôti, vous ne vous souciez pas de savoir si le maître fait d'abord le canard rôti ou sauté d'abord, et vous ne vous souciez pas de savoir où le canard a grandi.
Enfin, j'ai écrit un exemple du modèle d'apparence que nous avons tous utilisé
var stoPevent = fonction (e) {// Bloquer le comportement par défaut de l'événement et les bulles en même temps e.stoppropagation (); e.PreventDefault ();}Je sais que le concept de modèles d'apparence est facile à maîtriser, et vous n'avez peut-être pas nécessairement besoin d'un exemple de code JavaScript, mais certaines personnes se soucient toujours davantage du code et penseront qu'elle sera plus facile à comprendre. De plus, les articles JavaScript sans échantillons de code ne sont pas du tout convaincants, ils doivent donc être supprimés d'Internet. Commençons par un exemple simple d'écouteur d'événements. Tout le monde sait que l'ajout d'un écouteur d'événements n'est pas facile à moins que vous ne vouliez que le code s'exécute sur quelques navigateurs. Vous devez tester de nombreuses façons de vous assurer que le code pour différents navigateurs fonctionne correctement. Dans cet exemple de code, nous ajoutons simplement de la détection des fonctionnalités à cette méthode:
fonction addEvent (élément, type, func) {if (window.addeventListener) {element.addeventListener (type, func, false); } else if (window.attachevent) {element.attachevent ('on' + type, func); } else {élément ['on' + type] = func; }}C'est simple! Je souhaite vraiment que je ne puisse pas écrire des codes inutiles, ce qui les rend plus simples, mieux c'est, mais si c'est le cas, ce serait dénué de sens et vous ne voudriez pas le lire, non? Donc je ne pense pas, je pense que je veux vous montrer quelque chose de plus compliqué. Je veux juste dire que votre code ressemblerait à ceci:
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'; var baz = document.getElementById ('baz'); baz.style.color = 'red'; baz.style.width = '150px';Trop boiteux! Vous avez fait exactement la même chose pour chaque élément! Je pense que nous pouvons rendre les choses un peu plus faciles:
function setStyle (elements, propriété, valeur) {for (var i = 0, longueur = elements.length; i <longueur; i ++) {document.getElementById (elements [i]). style [propriété] = valeur; }} // Vous pouvez maintenant écrire de cette façon: setStyle (['foo', 'bar', 'baz'], 'Color', 'Red'); setStyle (['foo', 'bar', 'baz'], 'width', '150px');Pensez-vous que notre NB est cassé? Vous l'oubliez! Nous sommes des programmeurs JavaScript! Pouvez-vous utiliser des cerveaux pour obtenir de vraies choses? Peut-être que nous pouvons définir tous les styles une seule fois. Découvrez ceci:
fonction setStyles (éléments, styles) {for (var i = 0, longueur = elements.length; i <longueur; i ++) {var element = document.getElementById (elements [i]); for (var propriété dans les styles) {element.style [propriété] = styles [propriété]; }}} // Vous avez maintenant besoin d'écrire de cette façon: setStyles (['foo', 'bar', 'baz'], {couleur: 'red', width: '150px'});Si nous avons de nombreux éléments qui souhaitent définir le même style, ce code nous fait vraiment gagner beaucoup de temps.
Avantages du mode d'apparence:
Le but d'utiliser le mode d'apparence est de faciliter la rédaction du code combo pour les programmeurs, puis de l'utiliser à plusieurs reprises, ce qui permet de gagner du temps et des efforts. Fournissez une interface simplifiée pour certains problèmes complexes.
La méthode d'apparence est pratique pour les développeurs. Bin a fourni des fonctions de niveau relativement élevé, réduisant la dépendance à l'égard du code externe et ajoutant une certaine flexibilité supplémentaire au développement de systèmes d'application. En utilisant le mode d'apparence, un couplage serré au sous-système sous-jacent peut être évité. De cette façon, le système peut être modifié sans affecter le code client.
Inconvénients du mode d'apparence:
Parfois, les éléments d'apparence peuvent également apporter un fardeau supplémentaire inutile. Avant de mettre en œuvre certaines routines, vous devez soigneusement considérer leur praticité. Parfois par rapport à une fonction d'apparence complexe, sa fonction de composition est plus attrayante en termes de force. En effet, les fonctions d'apparence peuvent souvent effectuer des tâches dont vous n'avez pas besoin.
Pour un site Web personnel simple ou un petit nombre de pages marketing, il peut ne pas être sage d'importer cette bibliothèque JavaScript pour un comportement peu amélioré tel que les info-bulleurs et les fenêtres contextuelles. Pensez à utiliser seulement quelques éléments d'apparence simples à ce moment au lieu d'une bibliothèque pleine de ces choses.
Les fonctions d'apparence fournissent une interface simple pour effectuer diverses tâches complexes, ce qui rend le code plus facile à maintenir et à comprendre. Ils peuvent également affaiblir le couplage entre les sous-systèmes et le code client. Combinez des fonctions communes qui apparaissent souvent ensemble. Ce mode est très couramment utilisé dans le script DOM, qui nécessite des interfaces de navigateur incohérentes.