Mode singleton JavaScript facilement facilement

Définition: Assurez-vous qu'un objet (classe) n'a qu'une seule instance et fournit un point d'accès global pour y accéder;

Principe d'implémentation: utilisez les fermetures pour maintenir une référence à une variable locale qui contient la seule instance créée pour la première fois;

Principalement utilisé pour: cache global, fenêtre flottante de connexion, etc., lorsque seule une instance unique est nécessaire;

1. Méthodes pour implémenter le modèle Singleton pour un objet de motif non-Singleton (comme la démo):

Ajoutez une méthode statique à la démo pour implémenter un singleton:

 Demo.getSingle = (function () {var Demo = null; return function (name) {if (! Demo) {Demo = new Demo (name);} return Demo;}}) ();

usage:

Mode non-Singleton: var a = nouvelle démo («Peter»);

Mode singleton:

 var b1 = demo.getSingle ('Peter'); var b2 = demo.getSingle ('sufei'); b1 === b2; // true, toute nouvelle démo ('Peter')

Implémentez les singletons via des classes proxy:

 var proxydemo = (function () {var démo = null; return function (name) {if (! Demo) {Demo = new Demo (name);} return Demo;}}) ();

usage:

Mode non-Singleton: var a = nouvelle démo («Peter»);

Mode singleton: var b = new proxydemo ('Peter');

2. Pattern de singleton paresseux: créez le singleton uniquement en cas de besoin;

Voici comment créer un singleton paresseux général:

 var getseingle = function (foo) {var single = null; return function () {return single || (single = foo.apply (this, arguments)); }};

usage:

 var createLoginlayer = function () {var fragment = document.CreateDocumentFragment (); var div = document.CreateElement ('div'); div.style.display = 'Aucun'; // Ce qui suit ajoute d'autres éléments de connexion au div ... document.body.appendChild (frag.appendChild (div)); return div;} var createSingLeLoginlayer = getSingle (createLoginlayer); // lorsque l'utilisateur clique sur le bouton pour la première fois (id = quand 'lgbtn'), créez et affichez la fenêtre de connexion. Après le clic répété du bouton, ne sera pas créé à plusieurs reprises; document.getElementById ('lgbtn'). onClick = function () {var lg = créeSingLelogInlayer (); lg.style.display = 'bloc';}

Attachement: le résultat du calcul de la fonction de cache, tel que le calcul d'une séquence de nombres

Ce qui suit est un moyen d'écrire sans cache, ce qui est très lent!

 Fonction foo (n) {résultats = n <2? n: foo (n - 1) + foo (n - 2); Retours de retour;} console.log (foo (40)); // il doit être calculé pendant plusieurs secondes

Ce qui suit est la méthode d'écriture de cache, et les résultats sont essentiellement produits instantanément!

 var cache = {}; fonction foo (n) {if (! cache [n]) {cache [n] = n <2? n: foo (n - 1) + foo (n - 2); } return cache [n];} console.log (foo (100));

Meilleure écriture:

 var foo = (function () {var cache = {}; return function (n) {if (! cache [n]) {cache [n] = n <2? n: foo (n - 1) + foo (n - 2);} return cache [n];};}) (); console.log (foo (100));

Références:

"Mode javascript"

"Modèles de conception JavaScript et pratique de développement"

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.