Concepts de modèles singleton JavaScript et exemples de code

Préface

Comme d'autres langages de programmation, Javascript possède également de nombreux modèles de conception, tels que le mode singleton, le mode proxy, le mode observateur, etc. Les modèles de conception Javascript peuvent rendre notre logique de code plus claire et plus facile à maintenir et à refactoriser.

Cet article présentera le mode le plus courant et le plus pratique en mode Javascript - le mode singleton, qui est principalement divisé en parties concept et exemple. Tout en présentant des exemples, des points de connaissances supplémentaires dans le code seront également expliqués.

Concept de modèle singleton

Tout d'abord, qu'est-ce que le modèle singleton ? Cela peut être compris ainsi : le modèle singleton vise à garantir qu’une classe n’a qu’une seule instance et fournit un point d’accès global.

Peut-être que certaines personnes ne comprennent toujours pas le concept de singleton, vous pouvez donc imaginer quelques exemples dans la vie. Par exemple, lors de l'enregistrement d'un compte, si le compte que nous avons enregistré existe déjà, le système nous demandera "Le compte existe déjà. Voulez-vous utiliser ce compte pour vous connecter ?". Nous ne pouvons pas créer à nouveau un compte identique à moins que nous l'annulions. le compte d'origine. Il s’agit d’une incarnation vivante du modèle singleton.

Un exemple similaire est la fenêtre contextuelle de connexion sur la page Web. Peu importe le nombre de fois que nous cliquons sur le bouton de connexion, une seule boîte contextuelle de connexion sera toujours affichée sur l'interface, et une seconde. on ne peut pas être créé.

Cet article prendra la boîte de dialogue de connexion comme exemple pour présenter l'utilisation du mode singleton.

Instance en mode Singleton

1.affichage de démonstration

L'adresse de la démo est : Instance de boîte contextuelle

2. Affichage du code

Le code permettant de créer une instance de boîte contextuelle en mode singleton peut être écrit différemment par chacun, mais le but est le même : créer une boîte contextuelle unique et accessible au monde. Ensuite, nous implémentons cet exemple étape par étape.

(1) Obtenir l'objet DOM

var $ = function(id) {
    return typeof id === 'string' ? document.getElementById(id) : id; 
};

Tout d'abord, afin de faciliter certaines opérations ultérieures sur le DOM, nous utiliserons le principe du fonctionnel programmation ici pour obtenir l'identifiant cible. La méthode objet élément est encapsulée et peut être obtenue directement en utilisant $(id).

(2) Constructeur de cadre pop-up

var Modal = function(id, html) {
    this.html = html;
    this.id = id;
    this.open = false;
};

Ici, nous déclarons un Modal comme constructeur du cadre pop-up et définissons l'attribut public html à l'intérieur, identifiez et ouvrez. HTML est utilisé pour définir le contenu à l'intérieur de la boîte contextuelle, id est utilisé pour définir le nom de l'identifiant de la boîte contextuelle et open est utilisé pour déterminer si la boîte contextuelle est ouverte.

(3) méthode open

Modal.prototype.create = function() {
    if (!this.open) {
        var modal = document.createElement('p');

        modal.innerHTML = this.html;
        modal.id = this.id;
        document.body.appendChild(modal);

        setTimeout(function() {
            modal.classList.add('show');
        }, 0);

        this.open = true;
    }
};

Nous définissons la méthode create sur la chaîne de prototypes de Modal À l'intérieur de la méthode, nous créons et insérons une boîte contextuelle dans. le DOM En même temps, ajoutez un effet d'animation avec la classe "show" à la boîte contextuelle. Voici une brève introduction à classList :

classList est un attribut plus pratique pour faire fonctionner la classe d'élément que className, mais il n'est pas compatible avec les versions inférieures à IE10 en termes de compatibilité :

Les méthodes d'opération de classe qu'il fournit sont similaires à celles de jQuery, incluant principalement

• add(class1, class2, …) pour ajouter un ou plusieurs noms de classe à l'élément, similaire à addClass () de jQuery

• remove(class1, class2, …) supprime un ou plusieurs noms de classe de l'élément, similaire à removeClass() de jQuery

• contains(class) Détermine si le nom de classe spécifié existe, similaire à hasClass() de jQuery

Ici, nous utilisons la méthode add pour ajouter la classe show à Modal .

(4) méthode close

Modal.prototype.delete = function() {
    if (this.open) {
        var modal = $(this.id);

        modal.classList.add('hide'); 
        setTimeout(function() {
            document.body.removeChild(modal);
        }, 200);

        this.open = false;
    }
};

Après avoir défini la méthode open, nous définissons ici une méthode pour fermer la boîte contextuelle et ajoutons la classe hide à l'objet de boîte contextuelle à l'intérieur. Effet d'animation, et enfin supprimez l'objet contextuel sur la page.

(5) Créer une instance

var createIntance = (function() {
    var instance;
    return function() {
        return instance || (instance = new Modal('modal', '这是一个弹框'))
    }
})();

C'est une partie importante de la mise en œuvre du modèle singleton. Analysons les points de connaissance :

.

1. Utilisez Closure pour encapsuler la variable privée de l'instance et renvoyer une fonction

2. Utilisez la syntaxe || exécutez cette dernière instance de la méthode modale, si elle existe, elle renverra directement l'instance, garantissant qu'il n'y a qu'une seule instance contextuelle

La création de cette instance peut également être comprise comme faisant partie du mode proxy.

(6) Opération de bouton

var operate = {
    setModal: null,
    open: function() {
        this.setModal = createIntance();
        this.setModal.create();
    },
    delete: function() {
        this.setModal ? this.setModal.delete() : '';
    }
};

Ici, nous mettons l'opération de bouton dans l'objet d'opération afin que les opérations d'ouverture et de fermeture puissent obtenir l'instance setModal via cela .

(7) Liaison d'événements

$('open').onclick = function() {
    operate.open();
};

$('delete').onclick = function() {
    operate.delete();
};

Enfin, nous lions les méthodes open et delete aux deux boutons. Jusqu'à présent, nous l'avons implémenté en utilisant le mode singleton. une démo pop-up est implémentée.

Veuillez consulter le code complet : Code complet

Conclusion

Ce qui précède est le contenu du concept du mode JavaScript singleton et des exemples de code. Pour plus de contenu connexe, veuillez faire attention. sur le site Web PHP chinois (www .php.cn) !