Modèle singleton Javascript

Cette fois, je vous présente le mode cas unique de Javascript et quelles sont les précautions du mode singleton Javascript Ce qui suit est un cas pratique, jetons un coup d'oeil.

Le modèle singleton est un objet utilisé pour diviser un espace de noms et organiser un lot de propriétés et méthodes ensemble. S'il peut être instancié, alors il ne peut l'être. instancié une fois.

Divisez l'espace de noms et réduisez les variables globales

Organisez le code en un seul pour une lecture et une maintenance faciles

Tous les littéraux d'objet ne sont pas des singletons, comme les données simulées

🎜>

Structure de base :

let Cat = {   name: 'Kitty',   age: 3,   run: ()=>{      console.log('run');
   }
}

La structure littérale d'objet ci-dessus est l'un des moyens de créer un mode singleton, mais ce n'est pas un mode singleton. La caractéristique du mode singleton est qu'il. n'est instancié qu'une seule fois

Pour implémenter le mode singleton, vous pouvez utiliser une variable pour indiquer si la classe est instanciée

Implémentation de base :

class Singleton {    constructor(name){        this.name = name;        this.instance = null;    }    getName(){        return this.name;    }}let getInstance = (()=> {    let instance;    return (name)=> {        if(!instance) {            instance = new Singleton(name);        }        return instance;    }})()let cat1 = getInstance('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'

Utilisez la variable d'instance pour indiquer le instance Singleton. S'il n'y a pas d'instance, créez-en une. S'il y en a une, l'instance est renvoyée directement Comme elle ne peut être instanciée qu'une seule fois, l'instance obtenue par cat2 est la même que cat1

. Pratique

Pour éviter les créations répétées lors de la création d'éléments DOM, vous pouvez utiliser le mode singleton Créer

//单例模式let createModal = function() {    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';    document.body.appendChild(content);
}//代理获取实例let getInstance = function(fn) {    let result    return function() {        return result || (result = fn.call(this,arguments));
    }
}let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){    let modal = createSingleModal();
    modal.style.display = 'block';
};

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

Modèle d'observateur de Javascript

Modèle de stratégie de Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!