Exemple de modèle de conception JavaScript modèle singleton_compétences javascript

Peter Seibel, auteur de "Practical Common Lisp", a dit un jour que si vous avez besoin d'un modèle, quelque chose ne va pas. Le problème auquel il fait référence est qu’en raison des défauts inhérents au langage, il doit trouver et résumer une solution générale.

Qu'il soit faiblement typé ou fortement typé, langage statique ou dynamique, langage impératif ou déclaratif, chaque langage a ses avantages et ses inconvénients inhérents. Un athlète jamaïcain présente certains avantages en sprint et même en boxe, mais manque de pratique du yoga.

Warlock et Shadow Priest peuvent facilement devenir un excellent support, mais un Mage ennemi volant autour de la carte avec Macon sur le dos sera légèrement gênant. En passant à un programme, l'implémentation de décorateurs dans des langages statiques peut demander beaucoup d'efforts, mais comme js peut lancer des méthodes sur des objets à tout moment, le modèle de décorateur est devenu inutile dans js.

Il existe relativement peu de livres qui parlent des modèles de conception JavaScript. "Pro javaScript Design Patterns" est un classique, mais les exemples qu'il contient sont assez verbeux, je les ai donc combinés avec les codes que j'ai écrits au travail. résumer. S'il y a un écart dans ma compréhension, n'hésitez pas à me corriger.

1. Mode Singleton

La définition du modèle singleton est de produire une instance unique d'une classe, mais js lui-même est un langage "sans classe". De nombreux articles qui parlent des modèles de conception js utilisent {} comme singleton, ce qui n'a guère de sens. Comme il existe de nombreuses façons de générer des objets en js, examinons un autre singleton plus significatif.

Il existe une exigence courante. Lorsqu'un bouton est cliqué, un calque de masque doit apparaître sur la page. Par exemple, lorsque vous cliquez pour vous connecter sur web.qq.com.

Ce code pour générer un calque de masque de fond gris est très simple à écrire.

Copier le code Le code est le suivant :

var createMask = fonction(){
return document,body.appendChild( document.createElement(div) );
>
$( 'bouton' ).click( function(){
Var masque = createMask();
masque.show();
})

Le problème est que ce calque de masque est globalement unique, donc chaque fois que createMask est appelé, un nouveau div sera créé. Bien que vous puissiez le supprimer en masquant le calque de masque, cela est évidemment déraisonnable.

Regardons la deuxième option. Créez ce div au début de la page.

Copier le code Le code est le suivant :

var masque = document.body.appendChild( document.createElement( ”div' ) );
$( ”bouton' ).click( function(){
masque.show();
} )

De cette façon, un seul div de calque de masque sera créé sur la page, mais un autre problème suivra Peut-être que nous n'aurons jamais besoin de ce calque de masque, ce qui gaspillera un autre div, et toute opération sur le nœud DOM devrait l'être. très avare.

Et si vous pouviez utiliser une variable pour déterminer si le div a été créé ?

Copier le code Le code est le suivant :

masque var;
var createMask = fonction(){
si (masque) renvoie le masque ;
autre{
masque = document,body.appendChild( document.createElement(div) );
masque de retour;
>
>

Ça a l'air bien, ici nous avons en effet complété une fonction qui génère un objet à une seule colonne. Regardons de plus près ce qui ne va pas avec ce code.

Tout d'abord, cette fonction a certains effets secondaires. La référence à la variable externe mask est modifiée dans le corps de la fonction, createMask est une fonction non sécurisée. le masque n’est pas absolument nécessaire. Améliorons-le encore.

Copier le code Le code est le suivant :

var createMask = fonction(){
masque var;
fonction de retour(){
masque de retour || ( masque = document.body.appendChild( document.createElement('div') ) )
>
}()

Une simple fermeture est utilisée pour envelopper le masque variable, au moins pour la fonction createMask, il est fermé.

Vous constaterez peut-être cela et penserez que le modèle singleton est trop simple. En effet, certains modèles de conception sont très simples. Même si vous n'avez jamais prêté attention au concept de modèles de conception, vous utilisez toujours certains d'entre eux sans le savoir dans votre quotidien. code. Modèle de conception. Tout comme il y a de nombreuses années, lorsque j'ai compris ce qu'était la poussette du vieil homme, j'y ai aussi pensé.

Les 23 modèles de conception dans GOF sont également des modèles qui existent depuis longtemps et qui ont été utilisés à plusieurs reprises dans le développement de logiciels. Si le programmeur ne se rend pas clairement compte qu'il a utilisé certains modèles, il risque de manquer une conception plus appropriée la prochaine fois (ceci). Le passage vient de "Le monde de la programmation de Yukihiro Matsumoto").

Retour au sujet, le singleton précédent a encore des défauts. Il ne peut être utilisé que pour créer des calques de masque. Et si j'ai besoin d'écrire une fonction pour créer un objet xhr unique ? 🎜>

Les fonctions en js sont du premier type, ce qui signifie que les fonctions peuvent également être passées en paramètres.

Copier le code Le code est le suivant :

var singleton = fonction (fn) {

résultat var ;
fonction de retour(){
return result || ( result = fn .apply( this, arguments ) );
>
>
var createMask = singleton (fonction(){
return document.body.appendChild( document.createElement('div') );
})

Utilisez une variable pour enregistrer la première valeur de retour. Si elle a déjà été attribuée, la variable sera renvoyée en premier dans les appels suivants. Le code qui crée réellement le calque de masque est transmis au singleton via la fonction de rappel. wrapper. Cette méthode est en fait appelée mode pont. Concernant le mode pont, j'en parlerai un peu plus tard .

Cependant, la fonction singleton n'est pas parfaite. Elle a encore besoin d'un résultat variable pour stocker la référence du div Malheureusement, les caractéristiques fonctionnelles de js ne suffisent pas pour éliminer complètement les déclarations et les instructions.