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

🎜>

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

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

//单例模式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';
};

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!