js modèles de conception : qu'est-ce que le modèle singleton ? Introduction au mode js singleton

Cet article vous apporte du contenu sur les modèles de conception js : qu'est-ce que le modèle singleton ? L'introduction du mode js singleton a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Qu'est-ce que le modèle singleton ?

Définition : 1 Il n'y a qu'une seule instance. 2. Accessible globalement

Solution principale : Une classe utilisée globalement est fréquemment créée et détruite.

Quand utiliser le mode js singleton : Quand vous souhaitez contrôler le nombre d'instances et économiser les ressources système.

Comment résoudre : Déterminez si le système possède déjà ce singleton, si c'est le cas, renvoyez-le, sinon, créez-le.

Avantages du mode js singleton : 1. Il n'y a qu'une seule instance dans la mémoire, ce qui réduit la surcharge de mémoire, surtout lorsque les instances sont fréquemment créées et détruites (comme la gestion du cache de la page d'accueil ). 2. Évitez l'occupation multiple des ressources (telles que les opérations d'écriture de fichiers).

Inconvénients du mode singleton : Pas d'interface, pas d'héritage, conflits avec le principe de responsabilité unique. Une classe ne doit se soucier que de la logique interne, pas de la façon de l'instancier à l'extérieur.

Scénarios d'utilisation du mode singleton js : 1. Cache global. 2. Fenêtre contextuelle

Implémentez le mode singleton js :

const singleton = function(name) {
    this.name = name
    this.instance = null
}

singleton.prototype.getName = function() {
    console.log(this.name)
}

singleton.getInstance = function(name) {
    if (!this.instance) { // 关键语句
        this.instance = new singleton(name)
    }
    return this.instance
}

// test
const a = singleton.getInstance('a') // 通过 getInstance 来获取实例
const b = singleton.getInstance('b')
console.log(a === b)

Mode Singleton en JavaScript

Parce que JavaScript est un langage sans classe et que JS est global l’objet remplit les deux conditions du modèle singleton. Plusieurs fois, nous utilisons l'objet global comme mode singleton

var obj = {}

Pratique de la couche popup

Une façon d'implémenter la popup est de d'abord créer la popup puis de la masquer, cela gaspiller une surcharge DOM inutile. Nous pouvons la créer lorsque nous avons besoin de la boîte contextuelle et la combiner avec le mode singleton pour obtenir une seule instance, économisant ainsi une certaine surcharge DOM. Ce qui suit fait partie du code de la boîte de connexion :

//弹框层的实践
const createLoginLayer = function() {
    const myDiv = document.createElement('div')
    myDiv.innerHTML = '登入浮框'
    // myDiv.style.display = 'none'
    document.body.appendChild(myDiv);
    return myDiv
}

//使单例模式和创建弹框代码解耦
const getSingle = function(fn) {
  let result = null;
  return function() {
      if(!result){
          result = fn.apply(this, arguments);
      }
    return result;
  }
}

const createSingleLoginLayer = getSingle(createLoginLayer)

document.getElementById('loginBtn').onclick = function() {
    createSingleLoginLayer()
}

Recommandations associées :

Explication détaillée du modèle de constructeur du modèle de conception JS

modèle de conception php, modèle de conception

modèle de conception php code en mode singleton, modèle de conception php

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!