Peter Seibel, auteur de Practical Common Lisp, a dit un jour que si vous avez besoin d'un modèle, quelque chose doit être mal. Le problème qu'il a mentionné fait référence à la nécessité de rechercher et de résumer une solution générale en raison des défauts inhérents du langage.
Qu'il s'agisse d'un type faible ou fort, un langage statique ou dynamique, un langage impératif ou descriptif, chaque langue a ses propres avantages et inconvénients. Un athlète jamaïcain a des avantages dans le sprint et même la boxe, mais en manque dans la pratique du yoga.
Les sorcier et les prêtres de l'ombre peuvent facilement être un excellent auxiliaire, tandis qu'une magie ennemie volant avec Macon sur le dos serait légèrement gênante. Pour passer au programme, cela peut prendre beaucoup d'efforts pour mettre en œuvre le décorateur dans la langue statique. Parce que JS peut lancer des méthodes sur les objets à tout moment, le motif du décorateur devient inutile en JS.
Il y a pas mal de livres sur les modèles de conception JavaScript. "Pro JavaScript Design Patterns" est un livre classique, mais les exemples sont assez verbeux, donc sur la base du code que j'ai écrit au travail, je résumerai ma compréhension. Si ma compréhension est biaisée, assurez-vous de la corriger.
1. Mode singleton
La définition d'un singleton est de produire une instance unique d'une classe, mais JS lui-même est une langue "sans classe". De nombreux articles qui parlent du modèle de conception JS utilisent {} comme singleton et ont du sens. Parce qu'il existe de nombreuses façons de générer des objets par JS, jetons un coup d'œil à un autre singleton plus significatif.
Il y a une exigence commune que lorsque vous cliquez sur un bouton, un calque de masque doit apparaître sur la page. Par exemple, lorsque vous cliquez sur web.qq.com pour vous connecter.
Ce code qui génère une couche de masque de fond gris est facile à écrire.
La copie de code est la suivante:
var CreateMask = function () {
Document de retour, Body.ApendChild (document.CreateElement (div));
}
$ ('bouton') .click (function () {
Var mask = createmask ();
mask.show ();
})
Le problème est que cette couche de masque est mondialement unique, donc chaque fois que vous appelez CreateMask, un nouveau div sera créé, bien qu'il puisse être supprimé tout en cachant la couche de masque. Cependant, il est évidemment déraisonnable de le faire.
Regardons la deuxième solution, créons cette div au début de la page. Reportez-vous ensuite avec une variable.
La copie de code est la suivante:
var mask = document.body.appendChild (document.CreateElement ("div '));
$ ("Button ') .click (function () {
mask.show ();
})
Cela ne signifie pas que seul un div de couche de masque sera créé sur la page, mais un autre problème suivra. Peut-être que nous n'aurons jamais besoin de cette couche de masque, qui gaspillera une div et vous devriez être très avare sur toute opération du nœud Dom.
Si vous pouvez utiliser une variable, déterminez si un div a été créé?
La copie de code est la suivante:
masque var;
var CreateMask = function () {
si (masque) retourne masque;
autre{
mask = document, body.appendChild (document.CreateElement (div));
Masque de retour;
}
}
Il a l'air bien, mais ici, j'ai rempli une fonction qui génère un seul objet de colonne. Examinons de plus près ce qui ne va pas avec ce code.
Tout d'abord, cette fonction a certains effets secondaires. La fonction modifie la référence au masque variable externe dans le corps de fonction. Dans un projet de collaboration multi-personnes, CreateMask est une fonction dangereuse. D'un autre côté, le masque variable global n'est pas nécessaire. Amélilons-le.
La copie de code est la suivante:
var CreateMask = function () {
masque var;
return function () {
Masque de retour || (mask = document.body.appendChild (document.CreateElement ('div')))
}
} ()
Une fermeture simple est utilisée pour envelopper le masque variable, au moins pour la fonction CreateMask, il est fermé.
Peut-être que quand je vois cela, je pense que le singleton est trop simple. En effet, certains modèles de conception sont très simples. Même si je n'ai jamais prêté attention au concept de modèles de conception, j'ai utilisé certains modèles de conception dans mon code quotidien sans le savoir. Tout comme lorsque j'ai compris ce qu'est un vieil homme d'un vieil homme, j'y ai pensé il y a de nombreuses années, il s'est avéré qu'il s'agit d'un chariot d'un vieil homme.
Les 23 modèles de conception dans le GOF sont également des modèles qui ont existé et utilisés à plusieurs reprises dans le développement de logiciels. Si le programmeur ne réalise pas clairement qu'il a utilisé certains modèles, alors il pourrait manquer un design plus approprié la prochaine fois (ce passage vient du "World of Programming in Matsumoto".
Revenons au sujet, le singleton précédent a toujours ses inconvénients. Il ne peut être utilisé que pour créer des couches de masque. Et si j'ai besoin d'écrire une fonction pour créer un objet XHR unique? Puis-je trouver un wrapper singleton général?
Les fonctions dans JS sont le premier type, ce qui signifie que les fonctions peuvent également être transmises sous forme de paramètres. Jetons un coup d'œil au code final.
La copie de code est la suivante:
var singleton = fonction (fn) {
VAR RÉSULTAT;
return function () {
Retour Résultat || (résultat = fn .Apply (ceci, arguments));
}
}
var createmask = singleton (function () {
return document.body.appendChild (document.CreateElement ('div'));
})
Utilisez une variable pour enregistrer la première valeur de retour. S'il a été attribué, la variable sera renvoyée en premier dans les appels suivants. Le code qui crée vraiment la couche de masque est transmis au wrapper singleton via la fonction de rappel. Cette méthode est en fait appelée le mode Bridge. En ce qui concerne le mode de pont, il est mis un peu plus tard.
Cependant, la fonction singleton n'est pas parfaite, elle nécessite toujours un résultat variable pour enregistrer la référence au div. Malheureusement, les caractéristiques fonctionnelles de JS ne sont pas suffisantes pour éliminer complètement les déclarations et les déclarations.